VS Code can't use /jspm_packages; systemjs can't see angular2 ts files

Question

I am using JSPM to create a basic Angular 2 workflow. It works (see https://github.com/simonh1000/Angular2-beta-jspm), but I'm not getting intellisense as VS Code does not see the Angular jspm modules, as can be seen in the image. What should I do?

And here is my tsconfig.json including the suggestion from Eric:

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

I can make some progress in VS Code by using this sort of import statement

import { Component, View } from '../jspm_packages/npm/[email protected]/ts/core';

But then I get an error when I run it to the effect:

GET http://127.0.0.1:8080/jspm_packages/npm/[email protected]/ts/core.js

Here is an extract from config.js

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "typescript",
  typescriptOptions: {
    "module": "commonjs",
    "emitDecoratorMetadata": true
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  packages: {
    "app": {
      "main": "main",
      "defaultExtension": "ts"
    }
  },

Answer 1

This is expected at the moment because the TypeScript compiler doesn't know how to "find" JSPM packages.

VSCode relies on the TypeScript compiler, and the compiler only knows to look for modules through NPM packages (e.g. look inside node_modules/ - that's what "moduleResolution": "node" does).

Since you haven't installed Angular 2 via NPM, it's not in the node_modules/ folder and the compiler doesn't find it. You should get the same error if you were running the tsc command-line compiler.

Solutions are being discussed and it seems TypeScript@next has some basic support to manually specify a list of paths to look for modules (I haven't tested it yet). It doesn't seem ideal though as you'll have to manually maintain this list every time your JSPM dependency changes.

An alternative is to install Angular 2 via NPM in addition to JSPM (e.g. npm install angular2 --save or --save-dev) but that duplicates the dependency and also require manual maintenance when they change.

Such is life at the bleeding edge...