3

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);
});
Francesco Borzi
  • 56,083
  • 47
  • 179
  • 252
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
  • 1
    First you have twice `angular2.dev.js`, second if you want to write in ES5 you should use one of the `umd` bundles. Check this [table](https://github.com/angular/angular/blob/builds-js/bundles/overview.md). – Eric Martinez Jan 11 '16 at 18:23

1 Answers1

2

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);
});
Evan Wieland
  • 1,445
  • 1
  • 20
  • 36
Langley
  • 5,326
  • 2
  • 26
  • 42