angular2js: Uncaught Reference Error: System is not defined

前端未结

关注

 6  1399

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-controller tag where I am

相关标签:

6条回答

感情败类

2020-12-18 22:00

Using https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/angular2-all.umd.js helped to remove this error. No external system js needed.

0 讨论(0)
发布评论:

提交评论
- 加载中...
醉话见心

2020-12-18 22:11
In case of you are using some Seed of AngularJS.

This issues can be if you will remove or not include something like this in index.html
```
  
  
```
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
南笙

2020-12-18 22:17
This may seem kind of obvious, but make sure you've run:
```
npm install 
```
to populate the node_modules directory in your app's root directory. In particular you need:
```
node_modules/systemjs/dist/system.src.js
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

梦如初夏

2020-12-18 22:17

I recently ran into the same problem by following tutorial on PluralSight and using Plunker. I solved the issue by using this script

<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>

0 讨论(0)

难免孤独

2020-12-18 22:19

Try including the System JS file in your HTML.

<script src="https://jspm.io/system@0.16.js"></script>

Check this Github repo for any help: https://github.com/kensplanet/angularjs2-hello-world/blob/master/index.html

Angular2 way of doing it

Plunker link: http://plnkr.co/edit/36PZLTZ58bXmD4me0cpS?p=preview

index.html

<html>
    <head>
        <title>AngularJS2 Hello World Demo</title>

        <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
        <script src="https://jspm.io/system@0.16.js"></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

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

0 讨论(0)

死守一世寂寞

2020-12-18 22:21

I got the same issue in Angular 2.0 with TypeScript.

Im my issue I was requesting url with an extra slash '/' like 'http://localhost:3000/login/' (an extra slash after 'login')

0 讨论(0)
发布评论:

提交评论
- 加载中...