JSPM and Typescript import

5
votes

I'm trying to get working Angular2 with Typescript and SystemJS but I'm experiencing troubles with imports.

With this import (or with any other angular2 imports)

import {bootstrap} from 'angular2/platform/browser';

I'm getting Webstorm and tsc compiler errors (WS: cannot resolve directory, tsc: Cannot find module) even though there is angular2 in jspm_packages/npm/[email protected]

my directory structure is

browser
    components
        app.component.ts
    bootstrap.ts
    index.html
node_modules
jspm_packages
jspm.config.js
package.json
tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "filesGlob": [
    "!./node_modules/**/*.ts",
    "!./jspm_packages/**/*.ts",
    "./**/*.ts"
  ]
}

and config in jspm.config.js

System.config({
    defaultJSExtensions: true,
    transpiler: "typescript",
    paths: {
        "github:*": "../jspm_packages/github/*",
        "npm:*": "../jspm_packages/npm/*"
    }})

This code somehow works, but compiler seems confused, is there a better (or right) way how to do this? Thanks

1
typescriptangularsystemjs

1 Answers

2
votes

This is currently not possible in Webstorm 11. There is a workaround which actually works, see David Festen's comment at: https://youtrack.jetbrains.com/issue/WEB-18904.

By the way, please +1 this issue, maybe that helps speeding things up for Jetbrains to come up with a fix.