最小的 Angular2 应用程序收到未处理的承诺 SystemJS 错误

Question

我正在为我的团队演示 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，应该 return 你好，Angular 演示！，但是我在开发人员控制台中收到以下错误（运行 on 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

Answer 1

不确定我是应该回答我的问题还是直接删除它（接受建议）。

但是，因为每个人都以不同的方式解决特定问题（我的问题是从一个错误解决到另一个错误），我将留在这里以供后代使用。

再次欢迎大家提出建议。

解决方案

收到新的 Zone.assertZonePatched is not a function 错误后，我在以下 Whosebug 线程中找到了答案：

问题出在我对 zone.js 库的引用中：

<script src="https://unpkg.com/zone.js@0.6.12"></script>

根据线程，如果我使用 Angular 2.0.0 或更高版本，我需要将我的 zone.js 库版本更新为以下版本：

<script src="https://unpkg.com/zone.js@0.6.23"></script>

问题解决了。

Answer 2

试试这个：

<script src="//unpkg.com/zone.js@0.8.4"></script>

喜欢这里：Farata GIT

最小的 Angular2 应用程序收到未处理的承诺 SystemJS 错误

Minimal Angular2 App Receiving Unhandled Promise SystemJS Error

javascript

typescript

systemjs

angular