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

7
votes

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.

  1. 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?
  2. 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?

1
angularangular-cli
stackoverflow.com/questions/46014106/… – Z. Bagley

1 Answers

14
votes

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 {

}