CODEWITHSUNDEEP
javascriptangular
Leon Gaban
Leon Gaban

Reputation: 39018

Angular2 - Uncaught ReferenceError: ng is not defined

I'm trying to run a basic Angular2 app. However currently running into the following error when I run the app with live-server and npm start:

Uncaught ReferenceError: ng is not defined

enter image description here

I have the latest Angular2 npm installed. Here is my markup:

<html>
    <head>
        <title></title>
        <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
        <script src="https://code.angularjs.org/tools/typescript.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

        <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <first-comp></first-comp>
    </body>
</html>

My app.js file:

var FirstComponent = ng.
    Component({
        selector: 'first-comp'  
    })
    .View({
        template: '<h2>I am learning {{ myFramework }}</h2>'
    })
    .Class({
        constructor: function() {
            this.myFramework = "Angular2";
        }
    });

document.addEventListener('DOMContentLoaded', function() {
    ng.bootstrap(firstComponent);
});

Upvotes: 3

Views: 12122

Answers (1)

Langley
Langley

Reputation: 5344

From:

https://angular.io/guide/quickstart

you are missing the boot.js file which bootstrap's the whole thing before you start using it, in your file you are using the ng object before the DOM has loaded (DOMContentLoaded). That's why you have the wrapper on:

document.addEventListener('DOMContentLoaded', function() {
    ng.bootstrap(firstComponent);
});

Upvotes: 2

Related Questions