使用TypeScript的Angular：ReferenceError：系统未定义System.config

Question

我根据本教程尝试为TypeScript安装Angular 2： https ： //angular.io/guide/quickstart

我收到这个错误：

ReferenceError：系统未定义System.config

我不知道这是怎么回事。

文件夹结构：

project
|-index.hml
|-assets
    |-js
    |- jquery
    |-app
       |-app.component.js
       |-app.component.ts
       |-app.component.js.map
       |-main.js
       |-main.ts
       |-main.js.map

Answer 1

您需要在您的HTML页面中包含SystemJS。 要从node_modules文件夹中使用Angular2应用程序，至少需要：

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

并配置SystemJS以加载已编译的TypeScript（实际上是带有js扩展名的JavaScript）。 像这样的东西：

<script>
  System.config({
    map: {
      app: 'assets/js/app'
    },
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
</script>

此配置意味着当您尝试导入以app/开头的某些模块时，SystemJS将加载相应的JS文件（从TypeScript编译）。 例如： System.import('app/main'); 将加载app/main.js文件。

这意味着您需要先编译TypeScript文件。 启动npm run start命令时，tsc编译器会在后台自动启动，并在检测到更改时将TypeScript文件编译为JS文件。 您可以检查编译器是否已实际启动并且您已创建JS文件...

Answer 2

的index.html

确保添加以下内容。

<script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>


<script src="https://code.angularjs.org/tools/system.js"></script>
// error reason can be missing of this reference.


<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/http.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/router.dev.js"></script>

Answer 3

这是angular2js的重复：未捕获的参考错误：未定义系统

如果Angular2 Seed已经实现了injections并且需要libs loading机制，那么您应该使用这些方法。

如果您scratch创建应用程序，您可以根据需要包含libs，如上所述。