2
typescript transpilerが動作していません。私の@角型コンポーネントがロードされていません。私はこのエラーを取得しています： ZoneAwareError：Angular2とSystemJsとtypescript transpilerが動作しない
"Error: core_1.Component is not a function
Evaluating http://127.0.0.1:64223/app/app.component.ts
Evaluating http://127.0.0.1:64223/app/app.module.ts
Evaluating http://127.0.0.1:64223/app/main.ts
Loading app
at LoaderError__Check_error_message_for_loader_stack (http://127.0.0.1:64223/node_modules/systemjs/dist/system.src.js:78:11) [<root>]
at http://127.0.0.1:64223/node_modules/systemjs/dist/system.src.js:281:11 [<root>]
at Zone.run (http://127.0.0.1:64223/node_modules/zone.js/dist/zone.js:113:43) [<root> => <root>]
at http://127.0.0.1:64223/node_modules/zone.js/dist/zone.js:535:57 [<root>]
at Zone.runTask (http://127.0.0.1:64223/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
at drainMicroTaskQueue (http://127.0.0.1:64223/node_modules/zone.js/dist/zone.js:433:35) [<root>]"
私はtranspiler生産が得意is'tことを知っているが、私はDEVのENVでそれを使用しています。 だから私の構成は次です：
のTSconfig
{
"disableCompileOnSave": true,
"compileOnSave": false,
"compilerOptions" : {
"target" : "ES5",
"module" : "commonjs",
"experimentalDecorators" : true,
"noImplicitAny" : true
}
}
systemjs
System.config({
transpiler: 'ts',
typescriptOptions: {
module: "system",
target: "es2015",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
map: {
"ts": "/node_modules/plugin-typescript/lib",
"typescript": "/node_modules/typescript",
'rxjs': 'node_modules/rxjs',
'@angular': 'node_modules/@angular',
'@angular/common': 'node_modules/@angular/common/bundles',
'@angular/core': 'node_modules/@angular/core/bundles',
'@angular/compiler': 'node_modules/@angular/compiler/bundles',
'@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles',
'@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles'
},
packages: {
"ts": {
"main": "plugin.js"
},
"typescript": {
"main": "/lib/typescript.js",
"meta": {
"/lib/typescript.js": {
"exports": "ts"
}
}
},
'app' : {main: 'main', defaultExtension: 'ts'},
'rxjs' : {main: 'Rx'},
'@angular/common': { main: 'common.umd.js'},
'@angular/core': { main: 'core.umd.js'},
'@angular/compiler': { main: 'compiler.umd.js'},
'@angular/platform-browser': { main: 'platform-browser.umd.js'},
'@angular/platform-browser-dynamic': { main: 'platform-browser-dynamic.umd.js'},
}
});
index.htmlを
<!DOCTYPE html>
<html>
<head>
<title>Angular seed project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/typescript/lib/typescript.js"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="system.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<app>Loading...</app>
</body>
</html>
package.json
{
"name": "angular2",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "live-server"
},
"private": true,
"dependencies": {
"@angular/common": "^2.4.5",
"@angular/compiler": "^2.4.5",
"@angular/core": "^2.4.5",
"@angular/forms": "^2.4.5",
"@angular/http": "^2.4.5",
"@angular/platform-browser": "^2.4.5",
"@angular/platform-browser-dynamic": "^2.4.5",
"@angular/router": "^3.4.5",
"core-js": "^2.4.1",
"plugin-typescript": "^6.0.4",
"rxjs": "^5.1.0",
"systemjs": "^0.20.5",
"zone.js": "^0.7.6"
},
"devDependencies": {
"live-server": "^1.2.0",
"typescript": "2.0.0"
}
}
、私のコンポーネントおよびモジュール：
アプリ/
import { Component } from '@angular/core';
console.log('@angular/core');
@Component({
selector: 'app',
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`
})
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
}
アプリ/ app.module.ts
をapp.component.tsimport { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
とアプリ/ main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
おそらくsystem.js設定がおかしいです。私は昨夜これで苦労して助けを求めています。
私はangle-cliを使用することをお勧めします。これはすべての設定を処理し、素晴らしいツールです。 – shammelburg
@shammelburgどのような例ですか？ – user4785882
https://github.com/angular/angular-cli – shammelburg