我正在为我的团队演示一个 Angular 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/zone.js@0.6.12"></script>
<script src="https://unpkg.com/typescript@2.0.0"></script>
<script src="https://unpkg.com/systemjs@0.19.37/dist/system.src.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
map: {
'rxjs': 'https://unpkg.com/rxjs@5.0.0-beta=12',
'@angular/core': 'https://unpkg.com/@angular/core@2.0.0',
'@angular/common': 'https://unpkg.com/@angular/common@2.0.0',
'@angular/compiler': 'https://unpkg.com/@angular/compiler@2.0.0',
'@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser@2.0.0',
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic@2.0.0'
},
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 并应返回 Hello, Angular Demo!，但是我在开发者控制台中收到以下错误(运行在 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/zone.js@0.6.12: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/zone.js@0.6.12:323:29)
Error loading http://localhost:8080/main.ts
consoleError @ zone.js@0.6.12:461
_loop_1 @ zone.js@0.6.12:490
drainMicroTaskQueue @ zone.js@0.6.12:494
ZoneTask.invoke @ zone.js@0.6.12:426
我在过去 24 小时内检查了可能出现的问题，但找不到该问题的解决方案。
知道为什么我收到此特定错误会很有帮助。
更新
我相信这个组件错误是我编码期间的某种缓存问题，因为在我重新启动服务器(http-server -> localhost:8080)后，我不再收到此错误，现在收到以下错误:
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 (zone.js@0.6.12:323)
at Zone.run (zone.js@0.6.12:216)
at zone.js@0.6.12:571
at ZoneDelegate.invokeTask (zone.js@0.6.12:356)
at Zone.runTask (zone.js@0.6.12:256)
at drainMicroTaskQueue (zone.js@0.6.12:474)
at XMLHttpRequest.ZoneTask.invoke (zone.js@0.6.12:426)
consoleError @ zone.js@0.6.12:461
_loop_1 @ zone.js@0.6.12:490
drainMicroTaskQueue @ zone.js@0.6.12:494
ZoneTask.invoke @ zone.js@0.6.12:426
最佳答案
关于javascript - 最小 Angular2 应用程序接收未处理的 Promise SystemJS 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42072003/