Cannot find module '@angular/core' '@angular/core' @angular/platform-browser @angular/platform-browser-dynamic

Question

I try use Angular 2.0.0 with JSMP, SystemJS and TS Loader in ASP.NET MVC 5 (not core) app.

Visual Studio complains that find angular modules.

Severity    Code    Description Project File    Line    Suppression State
Error   TS2307  Cannot find module './components/app.component'.    
Error   TS2307  Cannot find module '@angular/core'. 
Error   TS2307  Cannot find module '@angular/core'. 
Error   TS2307  Cannot find module '@angular/platform-browser'. 
Error   TS2307  Cannot find module '@angular/platform-browser-dynamic'.

I install angular via JSPM.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    /* target of the compilation (es5) */
    "module": "system",
    /* System.register([dependencies], function) (in JS)*/
    "moduleResolution": "node",
    /* how module gets resolved (needed for Angular 2)*/
    "emitDecoratorMetadata": true,
    /* needed for decorators */
    "experimentalDecorators": true,
    /* needed for decorators (@Injectable) */
    "noImplicitAny": false
    /* any has to be written explicity*/
  },
  "exclude": [
    /* since compiling these packages could take ages, we want to ignore them*/
    "jspm_packages",
    "node_modules"
  ],
  "compileOnSave": false
  /* on default the compiler will create js files */
}

config.js

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  typescriptOptions: {
    "tsconfig": true
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  packages: {
    "app": {
      "main": "bootstrap",
      "format": "system",
      "defaultExtensions": "ts",
      "meta": {
        "*.ts": {
          "loader": "ts"
        }
      }
    }
  },

  map: {
    "@angular/common": "npm:@angular/common@2.0.0",
    "@angular/compiler": "npm:@angular/compiler@2.0.0",
    "@angular/core": "npm:@angular/core@2.0.0",
    "@angular/http": "npm:@angular/http@2.0.0",
    "@angular/platform-browser": "npm:@angular/platform-browser@2.0.0",
    "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@2.0.0",
    "@angular/router": "npm:@angular/router@3.0.0",
    "babel": "npm:babel-core@5.8.38",
    "babel-runtime": "npm:babel-runtime@5.8.38",
    "core-js": "npm:core-js@2.4.1",
    "es6-shim": "github:es-shims/es6-shim@0.35.1",
    "reflect-metadata": "npm:reflect-metadata@0.1.8",
    "rxjs": "npm:rxjs@5.0.0-beta.12",
    "ts": "github:frankwallis/plugin-typescript@5.1.2",
    "zone.js": "npm:zone.js@0.6.23",
    "github:frankwallis/plugin-typescript@5.1.2": {
      "typescript": "npm:typescript@2.0.2"
    },

  }
});

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './components/app.component';
@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

index.html

 <script src="../../jspm_packages/npm/core-js@2.4.1/client/shim.min.js"></script>
    <script src="../../jspm_packages/npm/zone.js@0.6.23/dist/zone.min.js"></script>
    <script src="../../jspm_packages/npm/reflect-metadata@0.1.8/Reflect.js"></script>
    <script src="../../jspm_packages/system.js"></script>
    <script src="../../config.js"></script>
    <script>
            System.config
            ({
                map: {
                    "@@angular/common": "npm:@@angular/common@2.0.0",
                    "@@angular/compiler": "npm:@@angular/compiler@2.0.0",
                    "@@angular/core": "npm:@@angular/core@2.0.0",
                    "@@angular/http": "npm:@@angular/http@2.0.0",
                    "@@angular/platform-browser": "npm:@@angular/platform-browser@2.0.0",
                    "@@angular/platform-browser-dynamic": "npm:@@angular/platform-browser-dynamic@2.0.0",
                    "@@angular/router": "npm:@@angular/router@3.0.0",
                    "reflect-metadata": "npm:reflect-metadata@0.1.8"
                },
                transpiler: "ts",
                packages:
                {
                    "app": {
                        "defaultExtension": "ts",
                        "meta": {
                            "*.ts": {
                                "loader": "ts"
                            }
                        }
                    }
                }
            });

            console.log("System.Config Init OK");
    </script>

Answer 1

Make sure folder 'node_modules' (click show hidden files) is in the right location (in the project's root, sibling with wwwroot). Also check @angular is showing in the project Dependencies folder:

([proj. name]/Dependencies/npm/@angular...).

I was moving files around as I was integrating the quickstart guide into a new ASP.NET Core project (I know yours' not Core, but just in case), and the node_modules folder was misplaced.

hope this helps

Answer 2

To use jspm you need typescript 2.0 so that you can use the path configuration and say to typescript where the module is located.

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "baseUrl": ".",
        "paths": {
            "@angular/core": [
                "jspm_packages/npm/@angular/core@2.0.0"
            ],
            "@angular/platform-browser-dynamic": [
                "jspm_packages/npm/@angular/platform-browser-dynamic@2.0.0"
            ],
            "@angular/common": [
                "jspm_packages/npm/@angular/common@2.0.0"
            ],
            "@angular/compiler": [
                "jspm_packages/npm/@angular/compiler@2.0.0"
            ],
            "@angular/forms": [
                "jspm_packages/npm/@angular/forms@2.0.0"
            ],
            "@angular/http": [
                "jspm_packages/npm/@angular/http@2.0.0"
            ],
            "@angular/platform-browser": [
                "jspm_packages/npm/@angular/platform-browser@2.0.0"
            ],
            "@angular/router": [
                "jspm_packages/npm/@angular/router@3.0.0"
            ],
            "es6-shim": [
                "jspm_packages/npm/es6-shim@0.35.1"
            ],
            "reflect-metadata": [
                "jspm_packages/npm/reflect-metadata@0.1.3"
            ],
            "rxjs/*": [
                "jspm_packages/npm/rxjs@5.0.0-beta.12/*"
            ],
            "systemjs": [
                "jspm_packages/npm/systemjs@0.19.31"
            ],
            "zone.js": [
                "jspm_packages/npm/zone.js@0.6.12"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "jspm_packages"
    ]
}