Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I am not sure how to include JS files (vendors) after switching Angular Cli from SystemJs to Webpack.

For example

Option A

I have some js files that were installed via npm. Adding script tags to the head tag like this does not work. Nor does it seem like the best way.

<head>    <script src="node_modules/some_package/somejs.js"> </head>  //With systemJs I could do this  <head>    <script src="vendor/some_package/somejs.js"> </head> 

Option B

Include these js files as part of the webpack bundle. This seems like the way it probably should be done. However I am not sure how to do this as all of the webpack code seems to be hidden behind the angular-cli-webpack node package. I was thinking maybe there is another webpack config that we might have access to. But I am not sure as I didn't see one when creating a new angular-cli-webpack project.

More Info:

The js files I am trying to include need to be included before the Angular project. For example jQuery and a third party js lib that isn't really setup for module loading or typescript.

References https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack

like image 721
Kris Hollenbeck Avatar asked Aug 09 '16 16:08

Kris Hollenbeck


People also ask

How do I bundle a Javascript file using Webpack?

You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script. But that's just the bare minimum it can do.

Does Angular CLI use Webpack?

The Angular CLI can create a new Angular project and it will handle the webpack configuration.

What is main bundle JS in Angular?

bundle. js which includes all the scripts to fill the gap between the version of Javascript that Angular needs and the version of Javascript supported by most browsers.

What is scripts bundle JS?

scripts.bundle.js represents scripts section that you configured in .angular-cli.json. vendor. bundle. js contains npm modules you are referencing in your app.


1 Answers

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

like image 126
Kris Hollenbeck Avatar answered Sep 20 '22 17:09

Kris Hollenbeck