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
I have the latest Angular2 npm installed. Here is my markup:
<html>
<head>
<title></title>
<script src=".19.6/dist/system.js"></script>
<script src=".js"></script>
<script src=".0.0-beta.0/angular2-polyfills.js"></script>
<script src=".0.0-beta.0/Rx.js"></script>
<script src=".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-p></first-p>
</body>
</html>
My app.js file:
var FirstComponent = ng.
Component({
selector: 'first-p'
})
.View({
template: '<h2>I am learning {{ myFramework }}</h2>'
})
.Class({
constructor: function() {
this.myFramework = "Angular2";
}
});
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(firstComponent);
});
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
I have the latest Angular2 npm installed. Here is my markup:
<html>
<head>
<title></title>
<script src="https://rawgithub./systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs/tools/typescript.js"></script>
<script src="https://code.angularjs/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs/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-p></first-p>
</body>
</html>
My app.js file:
var FirstComponent = ng.
Component({
selector: 'first-p'
})
.View({
template: '<h2>I am learning {{ myFramework }}</h2>'
})
.Class({
constructor: function() {
this.myFramework = "Angular2";
}
});
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(firstComponent);
});
-
1
First you have twice
angular2.dev.js, second if you want to write in ES5 you should use one of theumdbundles. Check this table. – Eric Martinez Commented Jan 11, 2016 at 18:23
1 Answer
Reset to default 2From:
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);
});