Angular 2 router System is undefined in ES5

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

1. ES5 or angular2-all.umd.js doesn't require router.dev.js
2. 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...