javascript - Angular 2 测试版即 10 "Potentially unhandled rejection [3] SyntaxError: Expected"

Question

这是一个 Angular 2 Beta 问题。我一开始特别笼统地希望这是一个已知的错误，而我在所有搜索中错过了一些东西。当 Angular 2 Beta.0 发布时，我使用 IE10 在我的应用程序中运行了一个非常简单的模块。它基本上打印了类似“我的第一个模块”的内容。

当 Angular 2 Beta.1 发布时，我尝试运行相同的代码并收到以下错误。这也发生在 Angular2 2.0.0-beta.2 和 angular2 2.0.0-beta.3 中:

    EXCEPTION: SyntaxError: Expected ';' 

堆栈跟踪:

SyntaxError: Expected ';'
   at evalExpression (.../js/angular/angular2/bundles/angular2.dev.js:452:5)
   at _createViewFactoryRuntime (.../js/angular/angular2/bundles/angular2.dev.js:24190:9)
   at Anonymous function (.../js/angular/angular2/bundles/angular2.dev.js:24144:13)
   at run (.../js/angular/angular2/bundles/angular2-polyfills.js:1243:14)
   at Anonymous function (.../js/angular/angular2/bundles/angular2.dev.js:13408:15)
   at zoneBoundFn (.../js/angular/angular2/bundles/angular2-polyfills.js:1220:14)
   at lib$es6$promise$$internal$$tryCatch (.../js/angular/angular2/bundles/angular2-polyfills.js:468:10)
   at lib$es6$promise$$internal$$invokeCallback (.../js/angular/angular2/bundles/angular2-polyfills.js:480:10)
   at Anonymous function (.../js/angular/angular2/bundles/angular2-polyfills.js:1028:14)
   at Anonymous function (.../js/angular/angular2/bundles/angular2-polyfills.js:123:10)

-----异步间隙-----

Error
   at _getStacktraceWithCaughtError (.../js/angular/angular2/bundles/angular2-polyfills.js:2240:10)
   at Anonymous function (.../js/angular/angular2/bundles/angular2-polyfills.js:2285:14)
   at bind (.../js/angular/angular2/bundles/angular2-polyfills.js:1218:10)
   at bindArguments (.../js/angular/angular2/bundles/angular2-polyfills.js:1401:14)
   at Anonymous function (.../js/angular/angular2/bundles/angular2-polyfills.js:1413:18)
   at Anonymous function (.../js/angular/angular2/bundles/angular2.dev.js:24142:11)
   at run (.../js/angular/angular2/bundles/angular2-polyfills.js:1243:14)
   at Anonymous function (.../js/angular/angular2/bundles/angular2.dev.js:13408:15)
   at zoneBoundFn (.../js/angular/angular2/bundles/angular2-polyfills.js:1220:14)
   at lib$es6$promise$$internal$$tryCatch (.../js/angular/angular2/bundles/angular2-polyfills.js:468:10)

-----异步间隙-----

Error
   at _getStacktraceWithCaughtError (.../js/angular/angular2/bundles/angular2-polyfills.js:2240:10)
   at Anonymous function (.../js/angular/angular2/bundles/angular2-polyfills.js:2285:14)
   at bind (.../js/angular/angular2/bundles/angular2-polyfills.js:1218:10)
   at bindArguments (.../js/angular/angular2/bundles/angular2-polyfills.js:1401:14)
   at Anonymous function (.../js/angular/angular2/bundles/angular2-polyfills.js:1413:18)
   at _compileComponentRuntime (.../js/angular/angular2/bundles/angular2.dev.js:24131:9)
   at _compileNestedComponentRuntime (.../js/angular/angular2/bundles/angular2.dev.js:24159:7)
   at Anonymous function (.../js/angular/angular2/bundles/angular2.dev.js:24140:13)
   at forEach (.../js/angular/es6-shim/es6-shim.min.js:10:16871)
   at Anonymous function (.../js/angular/angular2/bundles/angular2.dev.js:24139:11)

-----异步间隙-----

Error
   at _getStacktraceWithCaughtError (.../js/angular/angular2/bundles/angular2-polyfills.js:2240:10)
   at Anonymous function (.../js/angular/angular2/bundles/angular2-polyfills.js:2285:14)
   at bind (.../js/angular/angular2/bundles/angular2-polyfills.js:1218:10)
   at bindArguments (.../js/angular/angular2/bundles/angular2-polyfills.js:1401:14)
   at Anonymous function (.../js/angular/angular2/bundles/angular2-polyfills.js:1413:18)
   at _compileComponentRuntime (.../js/angular/angular2/bundles/angular2.dev.js:24131:9)
   at compileHostComponentRuntime (.../js/angular/angular2/bundles/angular2.dev.js:24085:9)
   at compileInHost (.../js/angular/angular2/bundles/angular2.dev.js:24436:7)
   at loadAsRoot (.../js/angular/angular2/bundles/angular2.dev.js:12326:7)
   at useFactory (.../js/angular/angular2/bundles/angular2.dev.js:12424:9)

-----异步间隙-----

Error
   at _getStacktraceWithCaughtError (.../js/angular/angular2/bundles/angular2-polyfills.js:2240:10)
   at Anonymous function (.../js/angular/angular2/bundles/angular2-polyfills.js:2285:14)
   at _createInnerZone (.../js/angular/angular2/bundles/angular2.dev.js:13396:7)
   at NgZone (.../js/angular/angular2/bundles/angular2.dev.js:13262:9)
   at createNgZone (.../js/angular/angular2/bundles/angular2.dev.js:12446:5)
   at application (.../js/angular/angular2/bundles/angular2.dev.js:12521:7)
   at bootstrap (.../js/angular/angular2/bundles/angular2.dev.js:24631:5)
   at main (Unknown script code:9:9)
   at Anonymous function (.../communicationReport.do?dispatch=showCommunicationCounts&wsession=new&entityId=10009ndlgxmw:34:14)
   at run (.../js/angular/angular2/bundles/angular2-polyfills.js:1243:14)

我正在加载的文件(Angular 2 Beta.0、Angular 2 Beta.1、Angular 2 Beta.2 相同)是:

<script src="js/angular/es6-shim/es6-shim.min.js"></script>
<script src="js/angular/systemjs/dist/system-polyfills.js"></script>

<script src="js/angular/angular2/bundles/angular2-polyfills.js"></script>
<script src="js/angular/systemjs/dist/system.src.js"></script>
<script src="js/angular/rxjs/bundles/Rx.js"></script>
<script src="js/angular/angular2/bundles/angular2.dev.js"></script>

更新:我的 boot.ts 看起来像:

import {bootstrap}    from 'angular2/platform/browser';

import {CountsComponent} from './counts.component';
export function main() {

    bootstrap( CountsComponent );

}

我的 counts.component.ts 文件如下所示:

  import {Component} from 'angular2/core';

@Component({
    selector: 'counts',
    template: '<h1>Landing Page1</h1>'
})
export class CountsComponent { }

初始 html 看起来像

    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'modules/counts': {
            format: 'register',
            defaultExtension: 'js'}} 
      });
      System.import('modules/counts/boot')
            .then(function( bootstrap ) {
                bootstrap.main();
            }, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body class="counts">
    <counts>Loading 1...</counts>
  </body>

这是一个已知问题吗？它有修复吗？您需要更多信息吗？

Answer 1

我也有同样的问题。在 plunker 中找到了一个快速修复方法。在 plunker 示例中的 es6-shim.min.js 脚本之前插入以下代码:

<script>
    if (!Function.name) {
        Object.defineProperty(Function.prototype, "name", {
            get: function () {
              var result = this.toString();
                var results = /function (.{1,})\(/.exec(this.toString());
                return (results && results.length > 1) ? results[1] : result;
            }

        });     
    } else if (navigator.userAgent.indexOf("Trident") != -1) {
        console.warn("QUICK FIX NAME ON FUNCTION IS OBSOLETE.");
    }
</script>

此快速修复无法解决 Angular 2 和 IE 的所有问题。希望这有一些帮助...