此代码应该显示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
环顾四周寻找解决方案,唯一看起来足够相似的问题是 System 的config.js
. 除本教程外,视频显示此工作没有任何配置提示。我应该提到,这是托管在远程服务器上,而不是视频中使用的本地 HTTP 服务器。
开发者窗口截图:
上述目录结构中显示的每个文件都是截至撰写本文时 GitHub 上最新可用的文件。如果我使用远程服务器或者我完全遗漏了其他东西,我应该包括一个默认配置文件吗?