CODEWITHSUNDEEP
javascriptjqueryangularjsangular
Mr.Moe
Mr.Moe

Reputation: 507

Angular 2.0.0 with angular-cli 1.0.0-beta.15: using typescript, how to integrate external libraries as in previous versions

I'm creating an application using Angular 2. I started using it in the RC2 phase and after alot of updates I made to my app according to the released RC I finally got it to run on the Angular 2.0.0 final version.

As I'm using the angular-cli as well and updated to the currently latest version (1.0.0-beta.15). I also did all the required changes needed as it e.g. now uses webpack instead of SystemJs.

My problem now is, that I can't seem to find a way to include external libraries (lets take jQuery for this example) to my application without the need to include from a CDN.

In previous versions of Angular 2 there was an angular-cli-build.js like this:

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'jquery/dist/*.min.+(js|map)'
    ]
  });
};

Which (looking to the last line of the vendorNpmFiles array) mapped the jquery library to the folder of the ready build app together with the system-config.js which had a little something like this:

 /** Map relative paths to URLs. */ 
const map: any = { 
  'jquery': 'vendor/jquery'
};

And what it did was creating a vendor folder inside the final build folder (by default called dist) from which I could simply import jquery from in my parent most index.html with a statement like:

<script src="vendor/jquery/dist/jquery.min.js"></script>

My question now is how to get a similar result as described in the angular-cli version I'm using.

Upvotes: 2

Views: 135

Answers (1)

Mr.Moe
Mr.Moe

Reputation: 507

For now I use the libraries globally so I include them in the angular-cli.json

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

This way it is also not needed to include them into the index.html. If someone finds another way to do it I'm still very interested in it.

Upvotes: 1

Related Questions