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

  • Dependency injection in Angular 2 when a constructor has arguments
  • Access HTML5 local storage from Angular2
  • Angular 2 : How to pass down a template trough a component property?
  • Angular 2: How do I get params of a route from outside of a router-outlet
  • Do I use NgFor or NgForOf?
  • angular2 ngModel/ngValue select option object - equality across different instances
  • 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 conig seems to be hidden behind the angular-cli-webpack 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

  • Angular 2 EventEmitter in Aurelia
  • How could I use a system.import() into component angular 2
  • Angular2 directive assign to template
  • String intrapolation in Angular 2.0
  • Angular 2 http post request is not being called out
  • using jQuery globally within Angular 2 application
  • 4 Solutions collect form web for “Angular Cli Webpack, How to add or bundle external js files?”

    Last tested using angular-cli 1.0.0 with Angular 4.0.0

    This can be accomplished using scripts:[] in .angular-cli.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.

    With Typescript 2.0 there seems be some configuration by convention where it will automatically bundle jQuery with the Angular2 build without explicitly telling it to if you npm install @types/jquery and jquery and it’s reference in an import.

    ng new testapp
    cd testapp
    npm install --save-dev angular-cli@webpack
    npm install --save @types/jquery
    npm install --save jquery
    

    Then add code below to app.component.ts

    import { Component } from '@angular/core';
    import * as jQuery from 'jquery';
    
    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.css']
    })
    export class AppComponent {
      title = 'app works!';
    
      public test(){
        jQuery('h1').text('Magic');
      }
    }
    

    Add the html below to app.component.html

    <h1 (click)="test()">
      {{title}}
    </h1>
    

    Then run it

    ng serve
    

    Edit:

    The correct way to do this would be editing angular-cli.json as mentioned in other posts. This post was from before those config options were added to the webpack version of angular-cli

    You might want to have a look at this page:
    https://github.com/angular/angular-cli#global-library-installation

    It show the basics of how to include .js and .css files

    Some javascript libraries need to be added to the global scope, and loaded as if they were in a script tag. We can do this using the apps[0].scripts and apps[0].styles properties of angular-cli.json.

    I havn’t used angular-cli before but I’m currently working with an Angular/Webpack build. In order to provide my application with jQuery and other vendors I use webpack’s plugin, ProvidePlugin(). This will typically sit in your webpack.config.js: Here’s an example for jquery, lodash and moment libraries. Here’s a link to the documentation (which is vague at best)

    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        _: 'lodash',
        moment: 'moment',
      })
    ]
    

    Incredibly, it actually allows you to use it right away, providing all other webpack setup has been done correctly and have been installed with npm.