angular2js: Uncaught Reference Error: System is not defined

Question

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 displaying a variable in html being defined in a javascript file as:

var MainController = function($scope){
$scope.message = "harsh";

and displaying in html as in this:html page

The error on chrome console is as:

Uncaught ReferenceError: System is not defined(anonymous function) @ angular2.js:3098

which points to some function in 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?

ng-controller doesn't seem like something you'd use in Angular 2. I'd probably start here if I were you ~ angular.io/docs/ts/latest/quickstart.html — Phil
– Phil, Commented Nov 16, 2015 at 5:15

kensplanet · Accepted Answer · 2015-11-16 05:33:16Z

10

Try including the System JS file in your HTML.

<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

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

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

edited Nov 16, 2015 at 5:33

answered Nov 16, 2015 at 5:13

kensplanet

4941 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Harshvardhan Solanki Over a year ago

Thanx for help it did remove the error but the message is still not being displayed

kensplanet Over a year ago

In Angular2, ng-controller is not valid. Angular2 has no controllers. It has Components instead. So, your code won't work. Syntax is not similar to 1.x

blackHawk Over a year ago

@kensplanet what are these kind of error why is it happen

kensplanet Over a year ago

@flyingHawk I am not sure which error are you referring to. But if you mean the System.js error, then including the System.js file should fix the problem.

Arnaud Tournier Over a year ago

in my case the error dissappears but the problem does not.

Sajin M Aboobakkar · Accepted Answer · 2017-03-20 10:58:14Z

2

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

answered Mar 20, 2017 at 10:58

Sajin M Aboobakkar

4,2394 gold badges34 silver badges40 bronze badges

1 Comment

newman Over a year ago

This was exactly what I ran into. strange.

Shankar Gurav · Accepted Answer · 2016-02-29 12:48:23Z

0

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.

answered Feb 29, 2016 at 12:48

Shankar Gurav

1,0779 silver badges17 bronze badges

Comments

vt5491 · Accepted Answer · 2016-03-31 06:33:20Z

0

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

answered Mar 31, 2016 at 6:33

vt5491

2,3043 gold badges24 silver badges34 bronze badges

Comments

Nate · Accepted Answer · 2017-03-22 02:29:43Z

0

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>

answered Mar 22, 2017 at 2:29

Nate

1

Comments

Samuel Ayvazyan · Accepted Answer · 2017-03-01 12:46:09Z

-1

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

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

answered Mar 1, 2017 at 12:46

Samuel Ayvazyan

2234 silver badges7 bronze badges

Collectives™ on Stack Overflow

angular2js: Uncaught Reference Error: System is not defined

6 Answers 6

5 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related