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() {

    this.SYSTEM_CONFIG_DEV.paths['angular2-jwt'] =
      `${this.APP_BASE}node_modules/angular2-jwt/angular2-jwt`;

    this.SYSTEM_BUILDER_CONFIG.packages['angular2-jwt'] = {
        main: 'angular2-jwt.js',
        defaultExtension : 'js'
    }

The above lines add a property named angular2-jwt to the sets of properties in two CONFIG objects used by SystemJS (development environment).

3. In main.ts (or in app.module.ts if using RC5/NgModule), 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 '@angular/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]
      }),
    ]);

Step 3 is needed only if adding some kind of angular-2 extension (most probably a Service).

4. Usage example:

• Go to the /about/ route in browser.

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

• Replace the seed's original about.component.ts with the following:

import { Component, OnInit } from '@angular/core';
import {AuthHttp} from 'angular2-jwt/angular2-jwt';

/**
 * This class represents the lazy loaded AboutComponent.
 */
@Component({
  moduleId: module.id,
  selector: 'sd-about',
  templateUrl: 'about.component.html',
  styleUrls: ['about.component.css']
})

export class AboutComponent implements OnInit {

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