Angular2, SystemJS paths for antenna components

Question

I created a sample Angular2 application where one of my modules uses an external (rest) library, for example:

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

I used

 tsd install rest 

who placed rest.d.ts in the typings directory and used

 bower install rest 

to get the version of execution (it wasn’t explained anywhere. I assume that I need to do something like this?)

I installed my gulp script to copy two directories from bower_components ("rest" and its dependency "when") to dist / lib

The application itself compiles fine, but in the browser it is not possible to resolve the rest / with module dependencies.

I 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 the index.html file, and I probably continue to add files to this list, but somehow it seems ... wrong.

Of course, it can't be right, what should I list each internal package structure in my index.html? I see that the when module expects to find its own dependencies in ./lib, where rest has a completely different structure.

So my questions are:

• What I did not understand about how to import javascript packages managed via bower (or npm) to the client side of Angular2?

• Do I need to list each file of each module in System.paths for it to work?

Answer 1

TSD is outdated, please use typings to install manifest file (.d.ts). Declaration files, if installed correctly, can be found in the typing directory. The declaration file describes the form of an external JavaScript library. They primarily help you during development (code completion, type checking, etc.). They do not need to import them into their typescript. They can be excluded from the typescript compilation process using the exclude option in the tsconfig.json file. You do not need to include external javascript libraries in your System.config, just create a script link in your index.html. You can map typescript modules of type angular2 in your System.config to other URLs and declare your own typescript application as a package. So:

• .d.ts files for external javascript libraries are primarily development-time files.
• typescript modules can be mapped to your own urls
• Define your own typescript application as a package.
• No, you do not need to continue adding files to your System.config file.

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" ] } 

System.config example with application in wwwroot / cool / app:

 System.config({ defaultJSExtensions: true, packages: { 'cool/app': { format: 'register', defaultExtension: 'js' }, }, map: { 'rxjs': 'assets/scripts/rxjs', 'angular2': 'assets/scripts/angular2' } });