Skip to content

Add external dependency

Minko Gechev edited this page Feb 23, 2017 · 35 revisions

Quick example:

In this example we'll show how you can add angular2-jwt to the angular2-seed.

  1. Install the npm dependency.
npm install angular2-jwt --save
  1. In tools/config/project.config.ts add the following code in the constructor:
// Add packages (e.g. angular2-jwt)
let additionalPackages: ExtendPackages[] = [{
  name: 'angular2-jwt',
  // Path to the package's bundle
  path: 'node_modules/angular2-jwt/angular2-jwt'
}];

this.addPackagesBundles(additionalPackages);
  1. Reference the dependency inside of any TypeScript file part of the project.

Inside src/client/app/+about/components/about.component.ts use:

import * as jwt from 'angular2-jwt/angular2-jwt';
// ...
console.log(jwt.AuthConfig);

Expect Console Output:

Console output results

Testing:

To support the new library for testing the Karma dependencies will need to be updated in karma.conf.js:

// list of files / patterns to load in the browser
    files: [
      'node_modules/zone.js/dist/zone.js',
      'node_modules/zone.js/dist/long-stack-trace-zone.js',
      //...

      { pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: false, watched: false }, // PhantomJS2 (and possibly others) might require it
      { pattern: 'node_modules/angular2-jwt/**/*.js', included: false, watched: false },

In addition, an alias for the import path must be set in test-config.js:

System.config({
  baseURL: '/base/',
  defaultJSExtensions: true,
  paths: {
    'angular2/*': 'node_modules/angular2/*.js',
    'rxjs/*': 'node_modules/rxjs/*.js',
    'angular2-jwt/*': 'node_modules/angular2-jwt/*.js'
  }
});