Angular 找不到模块'@角度/核心''@角度/核心'@角度/平台浏览器@角度/平台浏览器动态

我尝试在ASP.NET MVC 5（非核心）应用程序中使用Angular 2.0.0和JSMP、SystemJS和TS Loader

VisualStudio抱怨找不到角度模块

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'.

我通过JSPM安装angular

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"
    },

  }
});

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 { }

应用程序模块.ts

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"
    },

  }
});

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>

System.config
({
地图：{
“@@angular/common”：“npm:@@angular”/common@2.0.0",
“@@angular/编译器”：“npm:@@angular”/compiler@2.0.0",
“@@angular/core”：“npm:@@angular”/core@2.0.0",
@@angular/http:“npm:@@angular/http@2.0.0",
“@@angular/platform浏览器”：”npm:@@angular/platform-browser@2.0.0",
“@@angular/platform浏览器动态”：“npm:@@angular/platform浏览器”-dynamic@2.0.0",
“@@angular/路由器”：“npm:@@angular”/router@3.0.0",
“反射元数据”：“npm:反射-metadata@0.1.8"
},
运输工具：“ts”，
包装：
{
“应用程序”：{
“defaultExtension”：“ts”，
“元”：{
“*.ts”：{
“加载器”：“ts”
}
}
}
}
});
log（“System.Config Init OK”）；

要使用jspm，您需要typescript 2.0，这样您就可以使用路径配置，并告诉typescript模块所在的位置

tsconfig.json

{
“编译器选项”：{
“目标”：“es5”，
“模块”：“系统”，
“moduleResolution”：“节点”，
“源地图”：正确，
“emit decoromentadata”：正确，
“实验生态学者”：没错，
“removeComments”：false，
“noImplicitAny”：错，
“baseUrl”：“，
“路径”：{
“@angular/core”：[
“jspm_包/npm/@angular/core@2.0.0"
],
“@角度/平台浏览器动态”：[
“jspm_软件包/npm/@angular/platform浏览器-dynamic@2.0.0"
],
“@angular/common”：[
“jspm_包/npm/@angular/common@2.0.0"
],
“@angular/compiler”：[
“jspm_包/npm/@angular/compiler@2.0.0"
],
“@angular/forms”：[
“jspm_包/npm/@angular/forms@2.0.0"
],
“@angular/http”：[
“jspm_包/npm/@angular/http@2.0.0"
],
“@角度/平台浏览器”：[
“jspm_包/npm/@angular/platform-browser@2.0.0"
],
“@angular/router”：[
“jspm_包/npm/@angular/router@3.0.0"
],
“es6垫片”：[
“jspm_包/npm/es6-shim@0.35.1"
],
“反映元数据”：[
“jspm_包/npm/reflect-metadata@0.1.3"
],
“rxjs/*”：[
“jspm_包/npm/rxjs@5.0.0-beta.12/*”
],
“systemjs”：[
“jspm_包/npm/systemjs@0.19.31"
],
“zone.js”：[
“jspm_包/npm/区域。js@0.6.12"
]
}
},
“排除”：[
“节点_模块”，
“jspm_包”
]
}

要使用jspm，您需要typescript 2.0，这样您就可以使用路径配置，并告诉typescript模块所在的位置

tsconfig.json

{
“编译器选项”：{
“目标”：“es5”，
“模块”：“系统”，
“moduleResolution”：“节点”，
“源地图”：正确，
“emit decoromentadata”：正确，
“实验生态学者”：没错，
“removeComments”：false，
“noImplicitAny”：错，
“baseUrl”：“，
“路径”：{
“@angular/core”：[
“jspm_包/npm/@angular/core@2.0.0"
],
“@角度/平台浏览器动态”：[
“jspm_软件包/npm/@angular/platform浏览器-dynamic@2.0.0"
],
“@angular/common”：[
“jspm_包/npm/@angular/common@2.0.0"
],
“@angular/compiler”：[
“jspm_包/npm/@angular/compiler@2.0.0"
],
“@angular/forms”：[
“jspm_包/npm/@angular/forms@2.0.0"
],
“@angular/http”：[
“jspm_包/npm/@angular/http@2.0.0"
],
“@角度/平台浏览器”：[
“jspm_包/npm/@angular/platform-browser@2.0.0"
],
“@angular/router”：[
“jspm_包/npm/@angular/router@3.0.0"
],
“es6垫片”：[
“jspm_包/npm/es6-shim@0.35.1"
],
“反映元数据”：[
“jspm_包/npm/reflect-metadata@0.1.3"
],
“rxjs/*”：[
“jspm_包/npm/rxjs@5.0.0-beta.12/*”
],
“systemjs”：[
“jspm_包/npm/systemjs@0.19.31"
],
“zone.js”：[
“jspm_包/npm/区域。js@0.6.12"
]
}
},
“排除”：[
“节点_模块”，
“jspm_包”
]
}

确保文件夹“node_modules”（单击“显示隐藏文件”）位于正确的位置（在项目的根目录中，与wwwroot同级）。 另外，检查@angular是否显示在项目依赖项文件夹中：

（[proj.name]/Dependencies/npm/@angular…）

当我将《快速入门指南》集成到一个新的ASP.NET核心项目中时，我正在移动文件（我知道你的不是核心，只是以防万一），并且