Angular 2 Uncaught ReferenceError: System is not defined.
You can Try to include the System JS file in your HTML header file and resolve this error.
Include SystemJS Script.
<script src="https://jspm.io/system@0.18.17.js"></script>
The Example for detail as given below.
index.html file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://jspm.io/system@0.18.17.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.36/angular2.min.js"></script>
<script>
System.config({
paths: {
'main.js':'main.js'
}
});
System.import('main.js');
</script>
</head>
<body>
<app></app>
</body>
</html>
main.js file
import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
selector: 'app',
bindings: [Service]
})
@View({
template: '{{greeting}} I am Anil!'
})
class App {
constructor(service: Service) {
this.greeting = service.greeting();
setTimeout(() => this.greeting = 'Hi,', 2000);
}
}
class Service {
greeting() {
return 'Welcome you!';
}
}
bootstrap(App);
The live demo example