Angular2, SystemJS paths for bower components

Question

I have created a sample Angular2 app, where one of my modules make use of an external library (rest), like so:

/// <reference path="../../typings/tsd.d.ts" />
import rest = require('rest');
import jsonpClient = require('rest/client/jsonp');
import mime = require('rest/interceptor/mime');
... 

I have used

tsd install rest

which have placed the rest.d.ts in the "typings" directory, and have used

bower install rest 

to get the runtime version ( this wasn't explained anywhere. I assume I have to do something like this? )

I have set up my gulp script to copy the two directories from bower_components ("rest" and its dependency "when") into dist/lib

The app itselfs compiles fine, but in the browser, its not able to resolve the rest/when modules dependencies.

I have added

 System.config({
      "baseURL": "/",
      "transpiler": "traceur",
      "paths": {
        "components/*": "components/*.js",
        "provider/*": "provider/*.js",
        "services/*": "services/*.js",
        "model/*": "model/*.js",
        "rest": "lib/rest/rest.js",
        "rest/*": "lib/rest/*.js",
        "when": "lib/when/when.js",
        "when/*": "lib/when/*.js",
        "*": "lib/*.js"
      }
    });

to my index.html file, and I could probably keep going adding files to that list, but somehow this feels ... wrong.

Surely it can't be right, that I have to list every package's internal filestructure in my index.html? I see that the "when" module assumes to find its own dependencies in "./lib", where "rest" has a completely different structure.

So, my questions are:

• What have I misunderstood in how to import javascript packages managed via bower (or npm) into the client side of Angular2?

• Do I really need to list every file of every module in the System.paths to make it work?

Answer 1

TSD is deprecated please use typings to install declaration files (.d.ts). Declaration files, when installed correctly, can be found in your typings directory. A declaration file describes the shape of a external JavaScript library. They primarily help you during design time (code completion, type checking etc.). You do not need to import them in your typescript. They can be excluded from the typescript compile process by using the exclude option in your tsconfig.json file. You do not need to include external javascript libraries in your System.config, just make a script reference in your index.html. You can map typescript modules like angular2 in your System.config to other urls and declare your own typescript application as package. So:

• .d.ts files for external javascript libraries are primarily design time files.
• typescript modules can be mapped to your own urls
• define your own typescript app as package.
• No you do not have to keep going adding files to your System.config.

Example tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
  },

  "exclude": [
    "node_modules",
    "wwwroot",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Example System.config with app in wwwroot/cool/app:

System.config({
    defaultJSExtensions: true,
    packages: {
        'cool/app': {
            format: 'register',
            defaultExtension: 'js'
        },
    },

    map: {
        'rxjs': 'assets/scripts/rxjs',
        'angular2': 'assets/scripts/angular2'
    }
});