このコードは、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 サーバーではなく、リモート サーバーでホストされていることに注意してください。
開発者ウィンドウのスクリーンショット:
上記のディレクトリ構造に示されている各ファイルは、これを書いている時点で GitHub で入手できる最新のものです。リモートサーバーを使用している場合、または他の何かが完全に不足している場合に含める必要があるデフォルトの構成ファイルはありますか?