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并返回 Hello，Angular Demo！，但是我在开发人员控制台中收到以下错误（运行在谷歌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 - ＆gt; 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

试试这个：

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

就像这里：Farata GIT

Answer 2

不确定我是否应该回答我的问题或者只是删除它（对建议持开放态度）。

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

再次，接受建议。

<强>解

收到新的Zone.assertZonePatched后不是函数错误，我在下面的StackOverflow线程中找到了答案：

Zone.assertPatched is not a function

问题在于我对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>

解决了这个问题。

最小的Angular2 App接收未处理的Promise SystemJS错误

2 个答案: