モジュール '@ angular/core' '@ angular/core' @ angular/platform-b​​rowser @ angular/platform-b​​rowser-dynamic

Question

ASP.NETでJSMP、SystemJS、TS LoaderでAngular 2.0.0を試してみますMVC 5（コアではない）アプリ。

Visual Studioは角度モジュールを見つけることに不満を持ちます。

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経由でインストールします。

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

あなたをJSPM使用するには、あなたは、パスの設定を使用してモジュールがどこにあるか活字体と言うことができるように2.0を活字体が必要です。

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

Answer 2

フォルダが 'node_modules' を確認してください（隠しファイルをクリック）右の場所（プロジェクトのルートに、wwwrootのと兄弟）です。 また@angularがプロジェクトに表示されてチェックするフォルダ依存性：

（[。projの名前] /依存関係/ NPM/@角度...）。

クイックスタートガイドを新しいASP.NETコアプロジェクトに統合していたときにファイルを移動していました（私はあなたのコアではないが、まさにそのケースを知っています）、node_modulesフォルダが間違っていました。

希望は、これは私がtsconfig.jsonが、同じエラーを編集できますが、フィードバックをありがとうございました