7

このコードは、div含まれている Hello World を表示するはずですが、代わりにエラーが表示されますUncaught TypeError: System.import is not a function。ng-book2 の入門チュートリアル ビデオに従っています。このビデオには、次のコードが含まれていますindex.html

<!DOCTYPE html>
<html>
<head>
  <title>Angular 2</title>

  <script src="js/traceur-runtime-0.0.90.js"></script>
  <script src="js/system-0.18.4.js"></script>
  <script src="js/angular2-alpha31.js"></script>
</head>
<body>
  <script>System.import('js/app');</script>
  <hello-world></hello-world>
</body>
</html>

app.ts:

/// <reference path="../lib/node_modules/angular2/angular2.d.ts" />

import {
  Component,
  View,
  bootstrap
} from 'angular2/angular2';

// Annotation section
@Component({
  selector: 'hello-world'
})
@View({
  template: '<div>Hello World</div>'
})
// Component controller
class HelloWorld {

}

bootstrap(HelloWorld);

そして最後に現在のディレクトリ構造:

/ng2
  /js
    angular2-alpha31.js
    app.js
    app.js.map
    system-0.18.4.js
    system-0.18.4.js.map
    traceur-runtime-0.0.90.js
  index.html

解決策を探してみると、十分に似ていると思われる唯一の問題は、システムに問題があると述べていconfig.jsます。このチュートリアルを除いて、ビデオは構成のヒントなしでこれが機能することを示しています。これは、ビデオで使用されているローカル HTTP サーバーではなく、リモート サーバーでホストされていることに注意してください。

開発者ウィンドウのスクリーンショット:

System.import は関数ではありません

ファイル一覧

上記のディレクトリ構造に示されている各ファイルは、これを書いている時点で GitHub で入手できる最新のものです。リモートサーバーを使用している場合、または他の何かが完全に不足している場合に含める必要があるデフォルトの構成ファイルはありますか?

4

2 に答える 2

6

ファイルをさらにいじってみると、Angular2 が SystemJS のSystemオブジェクトを独自のオブジェクトでオーバーライドしていることがわかりました。HTML 内で上にangular2.js移動すると、ステートメントsystem.js

<script>System.import('js/app');</script>

正しい System object を使用します。

これは起こるべきではありませんが、当面の問題です。

于 2015-07-28T16:47:38.027 に答える
1

キャッチされていない TypeError: System.import は関数ではありません

js/system-0.18.4.js読み込みに失敗したことを示すテルテール表示。

于 2015-07-16T23:46:18.537 に答える