Where to add or place external Javascript files in angular cli project structure and use them in typescript file?

Question

In my angular cli project, I need to refer external js library which are not node packages. So, they will not be under node_modules folder as they are not installed by npm. These are loose js files.

In angular cli project structure, where should I add them as a best practice so that I can add them in scripts array in .angular-cli.json file?
How do I use them in my typescript file?

Below link explains how do we refer them in scripts array of .angular-cli.json file. However, it doesn't tell about where should external js files be added in folder structure of angular cli project if they are not node modules. Angular Cli Webpack, How to add or bundle external js files?

stackoverflow.com/questions/46014106/…

Z. Bagley
– Z. Bagley

2017-09-15 12:26:42 +00:00
Commented Sep 15, 2017 at 12:26 — Z. Bagley
– Z. Bagley, Commented Sep 15, 2017 at 12:26

Chandru · Accepted Answer · 2017-09-15 13:01:06Z

15

Add your external js file inside the assets folder like : assets=>js=>filename.js

.angular-cli.json

"scripts": [
    "../src/assets/js/externalfilename.js"
]

important after changes in .angular-cli.json file. Stop the project then start

How its use in ts file example below :

editor.js

<!-- assets/js/editor.js -->
Editor = function() {
    //This is my javascript function
    console.log('Editor');
}

editor.js will add in .angular-cli.json

"scripts": [
        "../src/assets/js/editor.js"
    ]

in component.ts file

declare var Editor: any;

export class EditorComponent {

}

edited Sep 15, 2017 at 13:01

answered Sep 15, 2017 at 12:46

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jyoti Prasad Pal Over a year ago

I've added one more question - How do I use them in my typescript file? Can you also please help?

Collectives™ on Stack Overflow

Where to add or place external Javascript files in angular cli project structure and use them in typescript file?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related