Javascript 最小Angular2应用程序接收未处理的Promise SystemJS错误_Javascript_Angular_Typescript_Systemjs

Javascript 最小Angular2应用程序接收未处理的Promise SystemJS错误

javascript angular typescript

Javascript 最小Angular2应用程序接收未处理的Promise SystemJS错误,javascript,angular,typescript,systemjs,Javascript,Angular,Typescript,Systemjs,我正在为我的团队演示Angular 2应用程序，显示应用程序运行所需的最低设置这包括对所有库和以下两个文件使用CDN： index.html 梅因酒店下面是index.html和main.ts文件： index.html <!DOCTYPE html> <head>  <script src="https://unpkg.co

我正在为我的团队演示Angular 2应用程序，显示应用程序运行所需的最低设置

这包括对所有库和以下两个文件使用CDN：

index.html 梅因酒店

下面是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>


System.config({
transpiler:'typescript'，
typescriptOptions:{emitDecoratorMetadata:true}，
地图：{
‘rxjs’：’https://unpkg.com/rxjs@5.0.0-β=12’，
“@angular/core”：”https://unpkg.com/@棱角的/core@2.0.0',
“@angular/common”：”https://unpkg.com/@棱角的/common@2.0.0',
“@angular/compiler”：”https://unpkg.com/@棱角的/compiler@2.0.0',
“@角度/平台浏览器”：”https://unpkg.com/@角度/平台-browser@2.0.0',
“@angular/platform browser dynamic”：”https://unpkg.com/@角度/平台浏览器-dynamic@2.0.0'
},
套餐：{
“@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'）；

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);

从'@angular/core'导入{Component}；
从“@angular/core”导入{NgModule}；
从“@angular/platform browser”导入{BrowserModule}；
从“@angular/platformBrowserDynamic”导入{platformBrowserDynamic}；
@组成部分({
选择器：“你好，世界”，
模板：“你好{{name}}！”
})
类HelloWorldComponent{
名称：字符串；
构造函数（）{
this.name='Angular Demo'；
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[HelloWorldComponent]，
引导：[HelloWorldComponent]
})
导出类AppModule{}
platformBrowserDynamic（）.bootstrapModule（AppModule）；

在服务器上加载两个文件并加载localhost:8080

index.html文件加载、注册systemjs，动态转换main.ts，并应返回您好，Demo，但我在开发者控制台（在Google Chrome浏览器上运行）中收到以下错误：

未处理的承诺拒绝：（SystemJS）未定义HelloWorldComponent
ReferenceError:未定义HelloWorldComponent
评估时(http://localhost:8080/main.ts！传输时间：47:40）
执行时(http://localhost:8080/main.ts！传送时间：53:14）
在ZoneDelegate.invoke(https://unpkg.com/zone.js@0.6.12:323:29)
加载错误http://localhost:8080/main.ts ; 区域：；任务：承诺；值：错误：（SystemJS）未定义HelloWorldComponent
ReferenceError:未定义HelloWorldComponent
评估时(http://localhost:8080/main.ts！传输时间：47:40）
执行时(http://localhost:8080/main.ts！传送时间：53:14）
在ZoneDelegate.invoke(https://unpkg.com/zone.js@0.6.12:323:29)
加载错误http://localhost:8080/main.ts
consoleError@zone。js@0.6.12:461
_环_1@区域。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

未处理的承诺拒绝：Zone.assertZonePatched不是函数；区域：；任务：承诺；值：TypeError:Zone.assertZonePatched不是函数
在新NgZoneImpl（ng_zone_impl.js:20）
在新NgZone（ng_zone.js:100）
在PlatformRef.\u bootstrapModuleFactoryWithZone（application\u ref.js:262）
评估时（应用参考js:304）
在ZoneDelegate.invoke（区域）。js@0.6.12:323)
在Zone.run（区域）。js@0.6.12:216)
在区域。js@0.6.12:571
在ZoneDelegate.invokeTask（区域。js@0.6.12:356)
在Zone.runTask（区域）。js@0.6.12:256)
在drainMicroTaskQueue（区域）。js@0.6.12:474)
在XMLHttpRequest.ZoneTask.invoke（区域。js@0.6.12:426)
consoleError@zone。js@0.6.12:461
_环_1@区域。js@0.6.12:490
drainMicroTaskQueue@zone。js@0.6.12:494
ZoneTask.invoke@zone。js@0.6.12:426

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

然而，由于每个人都以不同的方式处理某一特定问题（我的方法是从一个错误解决到另一个错误），我将把它留给子孙后代

再一次，接受建议

解决方案

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

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

这解决了问题。

尝试以下方法：

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

就像这里：

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