Javascript angular2js：未捕获的参考错误：系统未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33728887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular2js: Uncaught Reference Error: System is not defined
提问by Harshv
I am new to angular so please help. I am getting an error while trying to run a simple code with angular with angular ng-controllertag where I am displaying a variable in html being defined in a javascript file as:
我是 angular 的新手，所以请帮忙。我在尝试运行带有 angular ng-controller标签的简单代码时出现错误，我在 html 中显示一个变量，该变量在 javascript 文件中定义为：
var MainController = function($scope){
$scope.message = "harsh";
and displaying in html as in this:html page
并在 html 中显示如下：html 页面
The error on chrome console is as:
chrome 控制台上的错误是：
Uncaught ReferenceError: System is not defined(anonymous function) @ angular2.js:3098
未捕获的 ReferenceError：系统未定义（匿名函数）@ angular2.js:3098
which points to some function in angular2js:
它指向 angular2js 中的一些函数：
System.register("angular2/src/core/facade/lang", [], true, function(require, exports, module) {
I don't understand the problem. Is it related to the angular2.js which I included from angularjs.org?
我不明白这个问题。它与我从 angularjs.org 中包含的 angular2.js 相关吗？
回答by kensplanet
Try including the System JS file in your HTML.
尝试在 HTML 中包含 System JS 文件。
<script src="https://jspm.io/[email protected]"></script>
Check this Github repo for any help: https://github.com/kensplanet/angularjs2-hello-world/blob/master/index.html
检查此 Github 存储库以获得任何帮助：https: //github.com/kensplanet/angularjs2-hello-world/blob/master/index.html
Angular2 way of doing it
Angular2 的做法
Plunker link: http://plnkr.co/edit/36PZLTZ58bXmD4me0cpS?p=preview
Plunker 链接：http://plnkr.co/edit/36PZLTZ58bXmD4me0cpS?p=preview
index.html
索引.html
<html>
<head>
<title>AngularJS2 Hello World Demo</title>
<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/[email protected]"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
</head>
<body>
<harsh></harsh>
<script>
System.import('harsh');
</script>
</body>
</html>
harsh.js
严酷的.js
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
switch (arguments.length) {
case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
}
};
var angular2_1 = require('angular2/angular2');
var angularjs2Component = (function () {
function angularjs2Component() {
this.name = "Harsh";
}
angularjs2Component = __decorate([
angular2_1.Component({
selector: 'harsh'
}),
angular2_1.View({
template: '<h1>Hello {{name}}<h1>'
})
], angularjs2Component);
return angularjs2Component;
})();
angular2_1.bootstrap(angularjs2Component);
Output:
输出：
Hello Harsh
你好苛刻
回答by Sajin M Aboobakkar
I got the same issue in Angular 2.0 with TypeScript.
我在使用 TypeScript 的 Angular 2.0 中遇到了同样的问题。
Im my issue I was requesting url with an extra slash '/' like 'http://localhost:3000/login/' (an extra slash after 'login')
我的问题是我请求带有额外斜杠“/”的网址，例如“ http://localhost:3000/login/”（“登录”后的额外斜杠）
回答by Nate
I recently ran into the same problem by following tutorial on PluralSight and using Plunker. I solved the issue by using this script
我最近通过遵循有关 PluralSight 的教程并使用 Plunker 遇到了同样的问题。我使用这个脚本解决了这个问题
<script src="https://code.angularjs.org/1.3.0-beta.5/angular.js" data-semver="1.3.0-beta.5" data-require="angular.js@*"></script>
instead of this:
而不是这个：
<script src="https://code.angularjs.org/2.0.0-snapshot/angular2.js" data-require="angular.js@*" data-semver="2.0.0"></script>
回答by Shankar Gurav
Using https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/angular2-all.umd.jshelped to remove this error. No external system jsneeded.
使用https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/angular2-all.umd.js帮助来消除这个错误。不需要外部system js。
回答by vt5491
This may seem kind of obvious, but make sure you've run:
这可能看起来很明显，但请确保您已经运行：
npm install
to populate the node_modulesdirectory in your app's root directory. In particular you need:
填充应用程序根目录中的node_modules目录。您尤其需要：
node_modules/systemjs/dist/system.src.js
回答by Samuel Ayvazyan
In case of you are using some Seed of AngularJS.
如果您使用的是 AngularJS 的一些种子。
This issues can be if you will remove or not include something like this in index.html
如果您将删除或不包含此类内容，则可能会出现此问题 index.html
<!-- shims:js -->
<!-- endinject -->
Sometimes developers who is not familiar with AngularJS 2 and particular seed project are thinking that they remove extra comments from HTML and even doesn't realize that it is injection.
有时不熟悉 AngularJS 2 和特定种子项目的开发人员认为他们从 HTML 中删除了额外的注释，甚至没有意识到它是injection.
