typescript: import jspm libraries

Question

So most examples I found on importing jspm packages to typescript assumed that I wanted to use Systemjs to load and interpret them in the browser. However, I would rather like to use tsc to build commonjs modules and only import the js code, since it seems to me to be the more general and error-resistent 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 in my index.ts via import { bootstrap } from 'angular2/platform/browser';

When running tsc, I get the error

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

Now I wonder, can I make jspm-packages known to typescript? I feel like I tried it all, removing the jspm_packages from the tsconfig exclude list, switching to node module resolution or systemjs module generation. Maybe I just haven't found the right combination. Any hints on what to try next?

The first line from the jspm site is "jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader". I don't think using jspm without system.js is the right approach here. — Matt Lishman

skalidindi skalidindi · Accepted Answer · 2016-03-20T04:30:39

I am also struggling with this same issue and after some research, I learned that there no good solutions to allow this as of yet.

Workarounds:

A) You can duplicate your dependencies and install it with npm. tsc should not throw any errors since its resolving from npm.

B) Change your tsconfig.json and map angular to the jspm path. For example

"baseUrl": ".",
"paths": {
     "angular2/*": [
        "jspm_packages/npm/[email protected]/*"
     ],
     "rxjs/*": [
        "jspm_packages/npm/[email protected]/*"
     ]
  }

See https://github.com/frankwallis/plugin-typescript/tree/master/examples/angular2 for a full example.

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

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

typescript: import jspm libraries

1 Answers