Angular Cli Webpack, How to Add or Bundle External Js Files

Angular Cli Webpack, How to add or bundle external js files?

Last tested using angular-cli 11.x.x with Angular 11.x.x

This can be accomplished using scripts:[] in angular.json.

{
  "project": {
    "version": "1.0.0",
    "name": "my-project"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false
  }
}

Note: As the documentation suggests in the global library installation: if you change the value of your styles (or scripts!) property, then:

Restart ng serve if you're running it,

..to see the scripts executed in a **globalcontext via the scripts.bundle.js file.

Note: As discussed in the comments below. JS libs that support UMD modules via es6 imports such as jQuery can also be imported into your typescript files using the es6 import syntax. For example: import $ from 'jquery';.

How can I add external JS file in Angular CLI component, specific to the component only?

You can try

import * as test from 'test.js';

export class HomeComponent {
    ngOnInit() {
       test.testFunction(); //testFunction is in home.js
   }
}

// test.js
export function testFunction() {
    console.log('hello world');
}

Please refer to this answer: Angular 2: import external js file into component

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

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 {

}

Importing JS bundle to an Angular Library

Sometimes you could have that kind of circumtances like having would like to use an JS library in your Angular project.

i have encountered something like that but i have created one directive file in the src folder like "type.d.ts" so after i declared my library in it with something like "declare module 'pdfmake/build/vfs_fonts.js';" and at last imported it in my component file like "import * as pdfMake from 'pdfmake/build/pdfmake.js';"

1- Create one directive file like "type.d.ts"

2- Declare your JS library in your recent file created with something like "declare module 'pdfmake/build/pdfmake.js';"

3- Declare back the import statement in your component file like "import * as pdfMake from 'pdfmake/build/pdfmake.js';"

---

Related Topics