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

by

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';.

More Related Contents:

  1. Load new modules dynamically in run-time with Angular CLI & Angular 5
  2. Upgrading to angular-6.x gives “Uncaught ReferenceError: global is not defined”
  3. How to iterate using ngFor loop Map containing key as string and values as map iteration
  4. typescript anonymous object with variable based label value
  5. How to pass parameters rendered from backend to angular2 bootstrap method
  6. CORS Error: “requests are only supported for protocol schemes: http…” etc
  7. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  8. Using http rest apis with angular 2
  9. Angular 2: How to detect changes in an array? (@input property)
  10. Angular 2 optional route parameter
  11. Typescript Type ‘string’ is not assignable to type
  12. Angular 2 Karma Test ‘component-name’ is not a known element
  13. How to do the chain sequence in rxjs
  14. Angular 6: How to set response type as text while making http call
  15. using external JS libraries in my angular 2 project
  16. Huge number of files generated for every Angular project
  17. Is it a good practice using Observable with async/await?
  18. Angular 2 Material 2 datepicker date format
  19. Angular 2 Component @Input not working
  20. Highlight the search text – angular 2
  21. angular 4+ assign @Input for ngComponentOutlet dynamically created component
  22. Dynamic template in templatURL in angular2
  23. Converting an image to base64 in angular 2
  24. Angular2 – catch/subscribe to (click) event in dynamically added HTML
  25. Angular 2 Hover event
  26. angular 2 access ng-content within component
  27. How to use jQuery UI with Angular 2
  28. Is it a bad practice to use jQuery in Angular? [closed]
  29. How to Inject Angular2 Http service into es6/7 Class?
  30. Angular 4: How to read content of text file with HTTPClient

Leave a Comment