0
私のチームのためにAngular 2アプリをデモして、アプリケーションが機能するために必要な最小限の設定を示します。Minimal Angular2 App未処理のPromise SystemJSエラーを受信
これは、すべてのライブラリと以下の2つのファイルのためのhttp://unpkg.com CDNを利用しています
index.htmlを main.ts以下
あるのindex.htmlとmain.tsファイル：index.htmlを
<!DOCTYPE html>
<head>
<!-- polyfills must load before zone.js -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
map: {
'rxjs': 'https://unpkg.com/[email protected]=12',
'@angular/core': 'https://unpkg.com/@angular/[email protected]',
'@angular/common': 'https://unpkg.com/@angular/[email protected]',
'@angular/compiler': 'https://unpkg.com/@angular/[email protected]',
'@angular/platform-browser': 'https://unpkg.com/@angular/[email protected]',
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/[email protected]'
},
packages: {
'@angular/core': { main: 'index.js' },
'@angular/common': { main: 'index.js' },
'@angular/compiler': { main: 'index.js' },
'@angular/platform-browser': { main: 'index.js' },
'@angular/platform-browser-dynamic': { main: 'index.js' }
}
});
System.import('main.ts');
</script>
</head>
<body>
<hello-world></hello-world>
</body>
</html>
サーバー上の両方のファイルをロードした後main.ts
import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@Component({
selector: 'hello-world',
template: '<h1>Hello {{ name }}!</h1>'
})
class HelloWorldComponent {
name: string;
constructor() {
this.name = 'Angular Demo';
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ HelloWorldComponent ],
bootstrap: [ HelloWorldComponent ]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
、およびロードはlocalhost：8080
index.htmlファイルのロードは、systemjsを登録し、その場でmain.tsをtranpsilesと返す必要がありますこんにちは、角度デモ！は、しかし、私は（Google Chromeブラウザ上で動作する）デベロッパーコンソールに次のエラーが表示されます。
Unhandled Promise rejection: (SystemJS) HelloWorldComponent is not defined
ReferenceError: HelloWorldComponent is not defined
at eval (http://localhost:8080/main.ts!transpiled:47:40)
at execute (http://localhost:8080/main.ts!transpiled:53:14)
at ZoneDelegate.invoke (https://unpkg.com/[email protected]:323:29)
Error loading http://localhost:8080/main.ts ; Zone: <root> ; Task: Promise.then ; Value: Error: (SystemJS) HelloWorldComponent is not defined
ReferenceError: HelloWorldComponent is not defined
at eval (http://localhost:8080/main.ts!transpiled:47:40)
at execute (http://localhost:8080/main.ts!transpiled:53:14)
at ZoneDelegate.invoke (https://unpkg.com/[email protected]:323:29)
Error loading http://localhost:8080/main.ts
consoleError @ [email protected]:461
_loop_1 @ [email protected]:490
drainMicroTaskQueue @ [email protected]:494
ZoneTask.invoke @ [email protected]:426
私は、過去24時間の潜在的な問題を乗り越えてきたし、この問題の解決策を見つけることができません。
この特定のエラーが表示される理由を知りたい場合は、参考にしてください。私は（HTTPサーバ - > localhostを：8080）私のサーバーを再起動した後に、このコンポーネントのエラーは、私のコーディング中にキャッシュの問題のいくつかの並べ替えではなかったと信じて
UPDATE
、私はもはやこのエラーを受け取りました、次のエラーが表示されるようになりました。
Unhandled Promise rejection: Zone.assertZonePatched is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Zone.assertZonePatched is not a function
at new NgZoneImpl (ng_zone_impl.js:20)
at new NgZone (ng_zone.js:100)
at PlatformRef_._bootstrapModuleFactoryWithZone (application_ref.js:262)
at eval (application_ref.js:304)
at ZoneDelegate.invoke ([email protected]:323)
at Zone.run ([email protected]:216)
at [email protected]:571
at ZoneDelegate.invokeTask ([email protected]:356)
at Zone.runTask ([email protected]:256)
at drainMicroTaskQueue ([email protected]:474)
at XMLHttpRequest.ZoneTask.invoke ([email protected]:426)
consoleError @ [email protected]:461
_loop_1 @ [email protected]:490
drainMicroTaskQueue @ [email protected]:494
ZoneTask.invoke @ [email protected]:426