使用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，如上所述。