Typescript: import jspm libraries

Question

So, most of the examples I found when importing jspm packages to typescript suggested that I wanted to use Systemjs to load and interpret them in a browser. However, I would prefer to use tsc to build commonjs modules and import only js code, as it seems to me that this is a more general and error-free approach to me.

So my directory structure looks like this:

 src/index.ts jspm_packages/... config.js tsconfig.json 

With tsconfig having the following content:

 { "compilerOptions": { "target": "es5", "module": "commonjs", "noEmitOnError": true, "noImplicitAny": false, "rootDir": "src", "outDir": "target/app", "sourceMap": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "declaration": true }, "exclude": [ "jspm_packages", "node_modules", "typings", "target" ] } 

For testing purposes, I installed angular 2 with jspm install npm:angular2 and tried to import it into my index.ts via import { bootstrap } from 'angular2/platform/browser';

When I start tsc I get an error

 src/index.ts(1,27): error TS2307: Cannot find module 'angular2/platform/browser'. 

Now I wonder if I can make jspm packages known typescript? I feel like I tried all this by removing jspm_packages from the tsconfig exception list, switching to a node modular solution or creating a systemjs module. Perhaps I just did not find the right combination. Any hints on what to try next?

Answer 1

I am also struggling with the same problem, and after some research, I found out that there are no good solutions to do this yet.

Workarounds:

A) You can duplicate your dependencies and install it using npm. tsc should not cause any errors since it was resolved by npm.

B) Change tsconfig.json and the angular map to the jspm path. for instance

 "baseUrl": ".", "paths": { "angular2/*": [ "jspm_packages/npm/ angular2@2.0.0-beta.7 /*" ], "rxjs/*": [ "jspm_packages/npm/ rxjs@5.0.0-beta.2 /*" ] } 

For a complete example, see https://github.com/frankwallis/plugin-typescript/tree/master/examples/angular2 .

Note that "baseUrl" and "paths" are not official properties and are only for the typescript compiler beta.

The issue is currently being tracked here: https://github.com/Microsoft/TypeScript/issues/6012