简单 Angular 2 个应用给出 "Potentially unhandled rejection" 错误

Question

我有这个非常基本的例子：

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

我看到它在 plunker 上工作，但在本地却没有...:(

（在 Firefox 和 Chrome 上）

Answer 1

就我所看到的错误而言，您缺少 traceur 这将使您能够使用注释

因此将其添加到您的 HTML 中（请参阅 6. Declare the HTML 下的文档中甚至添加）

<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/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));

有了这个，您将能够发现更多错误。

试一试，你应该可以开始了。

简单 Angular 2 个应用给出 "Potentially unhandled rejection" 错误

Simple Angular 2 app gives "Potentially unhandled rejection" error

javascript

angular