Add external dependency

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

2. 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);

3. Potentially restart the server: control+c > npm start, as hot module reloading may fail.

Could not find input file /Users/mharwood/projects/labs/angular-seed/angular2-seed/src/client/src/client/hot_loader_main.ts. This is probably an issue of gulp-typescript.
Please report it at https://github.com/ivogabe/gulp-typescript/issues

---

Full Example:

For such library you don't need NPM_DEPENDENCIES, since in dev it is loaded with SystemJS, and in production browserify will bundle it based in the reference in about.component.ts.

If you are going to import modules via SystemJS, which is typically the case, you must edit its configuration for the desired module and eventually all its dependencies.

The sample of this SystemJS import is located in src/client/index.html

  <% if (ENV === 'dev') { %>
  <script>
    System.config(<%=
      JSON.stringify(SYSTEM_CONFIG, null, 2)
    %>)
  </script>
  <% } %>

Installation:

The typical steps are (using angular2-jwt as a sample):

1. Install the package via NPM:

npm install --save angular2-jwt

2. In tools/config/project.config.ts, inside the ProjectConfig class:

constructor() {
  (<any>this.SYSTEM_CONFIG_DEV.paths)['angular2-jwt'] =
    `${this.APP_BASE}node_modules/angular2-jwt/angular2-jwt`;
}

Please notice: The cast to any to avoid TS compile errors. This effectively adds a property named angular2-jwt to the options object used to configure SystemJS, whose value is a path to the target module.

Please notice: that the APP_BASE variable can be used to represent the base path of the seed (the one immediately above node_modules).

3. In main.ts, add the required dependency injection support. For angular2-jwt we typically need to inject AuthHttp (remember to import HTTP_PROVIDERS too!):

    import {Http, HTTP_PROVIDERS} from 'angular2/http';
    import {AuthHttp, AuthConfig} from 'angular2-jwt';
    //...
    bootstrap(AppComponent, [
      ROUTER_PROVIDERS,
      HTTP_PROVIDERS,
      provide(APP_BASE_HREF, { useValue: '<%= APP_BASE %>' }),
      provide(AuthHttp, {
          useFactory: (http: Http) => {
            return new AuthHttp(new AuthConfig(), http);
          },
          deps: [Http]
      }),
    ]);

4. Usage example:

• Go to the /about/ route in browser.

• Open src/client/app/+about/components/about.component.ts

• Add this to your replace about.component.ts with:

import {Component} from 'angular2/core';
import {AuthHttp} from 'angular2-jwt/angular2-jwt';

@Component({
  selector: 'sd-about',
  templateUrl: 'app/+about/components/about.component.html',
  styleUrls: ['app/+about/components/about.component.css']
})
export class AboutComponent {
  auth: any;

  constructor(public auth:AuthHttp) {}

  ngOnInit() {
    console.log(this.auth);
  }
}

Expect Console Output:

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-main.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'
  }
});