JavaScript 错误 : Unexpected anonymous System. 注册调用

Question

Visual Studio 2015 中有一个简单的 TypeScript 项目，其中包含两个 TypeScript 文件:

foo.ts

export class Foo {
    bar(): string {
        return "hello";
    }
}

app.ts

/// <reference path="foo.ts"/>
import {Foo}  from './foo';
var foo = new Foo();

foo.ts 编译成:

foo.js

System.register([], function(exports_1) {
    var Foo;
    return {
        setters:[],
        execute: function() {
            Foo = (function () {
                function Foo() {
                }
                Foo.prototype.bar = function () {
                    return "hello";
                };
                return Foo;
            })();
            exports_1("Foo", Foo);
        }
    }
});

当我在 html 页面中加载 foo.js 时，Google Chrome 控制台显示错误:

“system.src.js:4935 Uncaught TypeError: Unexpected anonymous System.register”

很明显，这是因为线

 System.register([], function(exports_1) 

tsconfig.json 中的编译器选项:

 {
 "compilerOptions": {
    "target": "es5",
    "module": "system"
  }
}

index.html 中的脚本下载:

<script src="./lib/system.js"></script>
<script src="./app/foo.js"></script>
<script src="./app/app.js"></script>

tsc版本:1.9.0-dev.20160322

当我不导入任何东西并将所有内容都放在一个 app.js 文件中时，代码可以正常工作，没有任何错误。 如何克服错误？

Answer 1

我已经找出问题所在，我以错误的方式初始化了应用程序。

初始化应该在index.html中加入，像这样:

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

以这种方式包含 foo.js 和 app.j 是错误的:

<script src="./app/foo.js"></script>
<script src="./app/app.js"></script>