7

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?

Jyoti Prasad Pal
  • 1,569
  • 3
  • 26
  • 41
  • https://stackoverflow.com/questions/46014106/how-to-add-my-own-node-js-script-to-angular-4-project/46014372#46014372 – Z. Bagley Sep 15 '17 at 12:26

1 Answers1

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 {

}
Chandru
  • 10,864
  • 6
  • 38
  • 53