ASP.NETでJSMP、SystemJS、TS LoaderでAngular 2.0.0を試してみますMVC 5(コアではない)アプリ。モジュール '@ angular/core' '@ angular/core' @ angular/platform-browser @ angular/platform-browser-dynamic
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/[email protected]",
"@angular/compiler": "npm:@angular/[email protected]",
"@angular/core": "npm:@angular/[email protected]",
"@angular/http": "npm:@angular/[email protected]",
"@angular/platform-browser": "npm:@angular/[email protected]",
"@angular/platform-browser-dynamic": "npm:@angular/[email protected]",
"@angular/router": "npm:@angular/[email protected]",
"babel": "npm:[email protected]",
"babel-runtime": "npm:[email protected]",
"core-js": "npm:[email protected]",
"es6-shim": "github:es-shims/[email protected]",
"reflect-metadata": "npm:[email protected]",
"rxjs": "npm:[email protected]",
"ts": "github:frankwallis/[email protected]",
"zone.js": "npm:[email protected]",
"github:frankwallis/[email protected]": {
"typescript": "npm:[email protected]"
},
}
});
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/[email protected]/client/shim.min.js"></script>
<script src="../../jspm_packages/npm/[email protected]/dist/zone.min.js"></script>
<script src="../../jspm_packages/npm/[email protected]/Reflect.js"></script>
<script src="../../jspm_packages/system.js"></script>
<script src="../../config.js"></script>
<script>
System.config
({
map: {
"@@angular/common": "npm:@@angular/[email protected]",
"@@angular/compiler": "npm:@@angular/[email protected]",
"@@angular/core": "npm:@@angular/[email protected]",
"@@angular/http": "npm:@@angular/[email protected]",
"@@angular/platform-browser": "npm:@@angular/[email protected]",
"@@angular/platform-browser-dynamic": "npm:@@angular/[email protected]",
"@@angular/router": "npm:@@angular/[email protected]",
"reflect-metadata": "npm:[email protected]"
},
transpiler: "ts",
packages:
{
"app": {
"defaultExtension": "ts",
"meta": {
"*.ts": {
"loader": "ts"
}
}
}
}
});
console.log("System.Config Init OK");
</script>
に役立ちます。あなたはtsconfig.jsonファイルをすべて貼り付けることができますか? – rco
完全なtsconfig.jsonで答えを編集しました。 typescriptのバージョン2.0を使用してコンパイルしているかどうか確認できますか? 「パス」機能は2.0で追加されただけです。 http://stackoverflow.com/questions/32385087/vs2015-change-typescript-version –