Question

此代码应显示包含Hello World的div，但我收到错误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

寻找解决方案，only issue that seems similar enough表示系统config.js存在问题。除了本教程之外，视频显示此工作没有任何配置提示。我应该提一下，这是托管在远程服务器上而不是视频中使用的本地HTTP服务器。

开发者窗口的屏幕截图：

System.import is not a function

File list

上面目录结构中显示的每个文件都是GitHub上写的最新文件。如果我使用远程服务器或者我完全错过了其他内容，是否应该包含默认配置文件？

Answer 1

After playing around with the files further, I found that Angular2 is overriding SystemJS' System object with its own. If angular2.js moved above system.js within the HTML, then the statement

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

uses the correct System object.

This should not be happening, however it is an issue for the time being.

Answer 2

未捕获的TypeError：System.import不是函数

js/system-0.18.4.js无法加载的告诉指示。

未捕获的TypeError：System.import不是函数

2 个答案: