Angular 2 router System is undefined in ES5 - angularjs

Question

I am trying to learn Angular 2 with ES5. But I am stuck at routing. I followed the tutorial in angular.io and added the following scripts in my index.html -
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
It worked all fine until I tried adding
<script src="node_modules/angular2/bundles/router.dev.js"></script>
After adding this I get the following error
System is undefined
I can see that router.dev.js uses System variable which is not defined.
How can I solve this?
After adding
<script src="node_modules/systemjs/dist/system.src.js"></script>
I am getting the following error -
EXCEPTION: No provider for Route! (class3 -> Route)
main.js
(function (app) {
document.addEventListener('DOMContentLoaded', function () {
ng.platform.browser.bootstrap(app.AppComponent, [ng.router.ROUTER_PROVIDERS]);
});
})(window.app || (window.app = {}));
app.component.js
(function (app) {
//Heroes Detail Component
app.HeroDetailComponent = ng.core.Component({
selector: 'my-hero-detail',
templateUrl: 'hero-detail.html',
inputs: ['hero']
}).Class({
constructor: function () {
}
});
//Heroes Component
app.HeroesComponent = ng.core.Component({
selector: "my-heroes",
templateUrl: 'heroes.html',
styleUrls: ['style.css'],
directives: [app.HeroDetailComponent]
}).Class({
constructor: [app.HeroService, function (_heroService) {
this.title = 'Tour of Heroes';
this._heroService = _heroService;
}],
ngOnInit: function () {
this.getHeroes();
},
onSelect: function (hero) {
this.selectedHero = hero;
},
getHeroes: function () {
this._heroService.getHeroes().then(heroes => this.heroes = heroes);
}
});
//App Component
app.AppComponent = ng.core.Component({
selector: 'my-app',
templateUrl: 'app.html',
directives: [app.HeroesComponent, ng.router.ROUTER_DIRECTIVES],
providers: [app.HeroService]
}).Class({
constructor: [ng.router.Route, function (_router) {
this.title = 'Tour of Heroes';
this._router = _router;
}]
});
//Route config
app.AppComponent = ng.router.RouteConfig([
{
path: '/heroes',
name: 'Heroes',
component: app.HeroesComponent
}
])(app.AppComponent);
})(window.app || (window.app = {}));
app.service.js
(function (app) {
app.HeroService = ng.core.Class({
constructor: function () {
this.HEROES = [
{ "id": 11, "name": "Mr. Nice" },
{ "id": 12, "name": "Narco" },
{ "id": 13, "name": "Bombasto" },
{ "id": 14, "name": "Celeritas" },
{ "id": 15, "name": "Magneta" },
{ "id": 16, "name": "RubberMan" },
{ "id": 17, "name": "Dynama" },
{ "id": 18, "name": "Dr IQ" },
{ "id": 19, "name": "Magma" },
{ "id": 20, "name": "Tornado" }
];
},
getHeroes: function () {
return Promise.resolve(this.HEROES);
},
getHeroesSlowly: function () {
return new Promise(resolve =>
setTimeout(() => resolve(this.HEROES), 2000) // 2 seconds
);
}
});
})(window.app || (window.app = {}));
I am trying to convert the Heroes Tutorial in ES5 from angular.io.
TL;DR/Solution
ES5 or angular2-all.umd.js doesn't require router.dev.js
Error was caused by misspelling. ng.router.Route should be ng.router.Router

Answer 1

You should try to include SystemJS in your HTML entry file:
<script src="node_modules/systemjs/dist/system.src.js"></script>
That said, I used routing with ES5 (see this plunkr: https://plnkr.co/edit/w61Ecbmuj7EfDnsYEHOS?p=info) but I didn't need to include the router.dev.js. The latter is for Angular2 applications written TypeScript or ES6 applications...