未捕获的类型错误：System.import 不是函数

2023-11-22

这段代码应该显示一个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>

and 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 is not a function

File list

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

进一步研究这些文件后，我发现 Angular2 正在覆盖 SystemJS'System对象有它自己的。如果angular2.js移至上方system.js在 HTML 中，然后是语句

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

使用正确的系统对象。

这不应该发生，但目前这是一个问题。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

未捕获的类型错误：System.import 不是函数

javascript

typescript

angular

systemjs