javascript - 简单的 Angular 2 应用程序出现 "Potentially unhandled rejection"错误

标签 javascript angular

我有一个非常基本的例子:

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>FlyLeaf</title>
        <script src="js/lib/system.js"></script>
        <script src="js/lib/angular2.dev.js"></script>
    </head>
    <body>

        <main-app></main-app>

        <script>
            System.config({
                paths: {
                    'app.js': 'js/app.js'
                }
            });
            System.import('app.js');
        </script>

    </body>
</html>

以及app.js内部:

import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'main-app'
})
@View({
    directives: [CSSClass, NgFor],
    template: `
        <h1>My first Angular 2 App</h1>
    `
})

class MainApp {
    constructor() {
        this.footerLinks = [];
    }
}

bootstrap(MainApp);

并给了我这个错误:

"Potentially unhandled rejection [3] Error loading "app.js" at http://localhost/HelloWorld/js/app.js
http://localhost/HelloWorld/js/app.js:3:1: Unexpected token @ (WARNING: non-Error used)"

我看到它在一个笨蛋上工作,但在本地却没有......:(

(在 Firefox 和 Chrome 上)

最佳答案

就我所看到的错误而言,您缺少 traceur这将允许您使用注释

因此,将其添加到您的 HTML 中(请参阅甚至在 6. Declare the HTML 下的文档中添加它)

<script src="https://github.jspm.io/jmcriffey/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e5c51495b4c134a4c5f5d5b4b4c134c4b504a57535b7e0e100e100609" rel="noreferrer noopener nofollow">[email protected]</a>/traceur-runtime.js"></script>

并在您的 System.config 中添加这些选项

System.config({
    traceurOptions: {
       annotations: true,
       types: true,
       memberVariables: true
   },
//...

最后,作为建议,请像这样使用 System.import

System.import("your.app").catch(console.log.bind(console));

有了这个,您将能够捕获更多错误。

尝试一下,你就可以开始了。

关于javascript - 简单的 Angular 2 应用程序出现 "Potentially unhandled rejection"错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32093809/

相关文章:

javascript - ES6 自执行导入

javascript - 如何创建对象数组或使用模型,就像我们在 JSON 中一样 - Angular/Ionic

javascript - 根据跨度文本值增加字体大小

javascript - 如何在 Angular 5 中使用 ngx-toastr 更改每个用例的特定 toast 的位置

angular - 具有父/子关系的 Angular 组件中的通用类型定义

angular - 在 Angular 2 中将 bool 值从父组件传递给子组件

javascript - Ajax 调用未获得成功响应

javascript - Ajax 显示成功,无需在 Internet Explorer 中提交数据

angular - 使用导出 const 变量的 Webpack treeshaking

css - Angular Material2 并非所有样式都适用