Menu
I have the following code running on my local server.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://jspm.io/[email protected]"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js"></script>
</head>
<body>
<my-app></my-app>
<script>
System.config({
paths: {
'*': '*.js',
'angular2/*': 'angular2/*'
}
});
System.import('main');
</script>
</body>
</html>
The above is the index.html page.
import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
selector: 'my-app'
})
@View({
template: '<h1>My first Angular 2 App</h1>'
})
class AppComponent {
}
bootstrap(AppComponent);
The above is the main.js file.
When I run this on the server I get the following in console.
http://localhost:63342/es6/main.js:3:1: Unexpected token @
angular2.dev.js:752 TypeError: Error loading "main" at http://localhost:63342/es6/main.js
Cannot read property 'split' of undefined
angular2.dev.js:753 TypeError: Error loading "main" at http://localhost:63342/es6/main.js
Cannot read property 'split' of undefined
at Zone.longStackTraceZone.getLongStacktrace (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:728:35)
at Zone.longStackTraceZone.onError (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:753:19)
at Zone.run (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:92:14)
at zoneBoundFn (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:66:19)
at D (https://jspm.io/[email protected]:1:7439)
at I (https://jspm.io/[email protected]:1:7071)
at O.7.O.when (https://jspm.io/[email protected]:1:10745)
at w.7.w.run (https://jspm.io/[email protected]:1:9781)
at e.3.e._drain (https://jspm.io/[email protected]:1:1740)
at 3.e.drain (https://jspm.io/[email protected]:1:1394)
--- Sun Apr 26 2015 08:27:39 GMT+0530 (IST) - 738ms ago
Error
at Function.getStacktraceWithUncaughtError (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:699:32)
at Zone.longStackTraceZone.fork (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:758:43)
at Zone.bind (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:64:21)
at Function.Zone.bindArguments (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:195:22)
at t.fnNames.forEach.obj.(anonymous function) [as then] (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:186:42)
at k (https://jspm.io/[email protected]:1:21515)
at https://jspm.io/[email protected]:1:22664
at Zone.run (https://code.angularjs.org/2.0.0- alpha.19/angular2.dev.js:89:19)
at zoneBoundFn (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:66:19)
at D (https://jspm.io/[email protected]:1:7439)
--- Sun Apr 26 2015 08:27:39 GMT+0530 (IST) - 739ms ago
Error
at Function.getStacktraceWithUncaughtError (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:699:32)
at Zone.longStackTraceZone.fork (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:758:43)
at Zone.bind (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:64:21)
at Function.Zone.bindArguments (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:195:22)
at t.fnNames.forEach.obj.(anonymous function) [as then] (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:186:42)
at x.import (https://jspm.io/[email protected]:1:22539)
at x.$__global.upgradeSystemLoader.e.import (https://jspm.io/[email protected]:5:1180)
at http://localhost:63342/es6/index.html:17:18
angular2.dev.js:752 TypeError: Cannot read property '__useDefault' of undefined
angular2.dev.js:753 TypeError: Cannot read property '__useDefault' of undefined
at https://jspm.io/[email protected]:5:1220
at Zone.run (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:89:19)
at zoneBoundFn (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:66:19)
at D (https://jspm.io/[email protected]:1:7439)
at I (https://jspm.io/[email protected]:1:7071)
at O.7.O.when (https://jspm.io/[email protected]:1:10745)
at w.7.w.run (https://jspm.io/[email protected]:1:9781)
at e.3.e._drain (https://jspm.io/[email protected]:1:1740)
at 3.e.drain (https://jspm.io/[email protected]:1:1394)
at MutationObserver.t (https://jspm.io/[email protected]:1:3302)
--- Sun Apr 26 2015 08:27:39 GMT+0530 (IST) - 742ms ago
Error
at Function.getStacktraceWithUncaughtError (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:699:32)
at Zone.longStackTraceZone.fork (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:758:43)
at Zone.bind (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:64:21)
at Function.Zone.bindArguments (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:195:22)
at t.fnNames.forEach.obj.(anonymous function) [as then] (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:186:42)
at x.$__global.upgradeSystemLoader.e.import (https://jspm.io/[email protected]:5:1195)
at http://localhost:63342/es6/index.html:17:18
The above code is taken from angular.io, the official angular 2 website. If the same code is executed in plunkr, I get the output "My first Angular 2 App" but not in my local.
Am I missing something?
302
It seems we have to import traceur-runtime.js and set traceur options.
Here is the plunker link
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<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.19/angular2.dev.js"></script>
</head>
<body>
<my-app></my-app>
<script>
System.config({
traceurOptions: {
annotations: true,
memberVariables: true,
types: true
},
paths: {
'*': '*.js',
'angular2/*': 'angular2/*'
}
});
System.import('main');
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With