How to route in Angular 2 using Javascript

Question

I am following the Tour of Heroes tutorial; currently at the Routing section. I am using the 2.0.0-RC4 bundle.

I have successfully refactored the AppComponent into a shell for the HeroesComponent. I have also added routes, loaded the necessary files, and done the necessary bootstrapping.

index.js — had to add the router beneath platform-browser because that's what I read in the ng-router source; provideRouter returns false otherwise

<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
<script src="node_modules/@angular/router/bundles/router.umd.js"></script>

main.js

ng.platformBrowserDynamic.bootstrap(app.AppComponent, [
    app.ROUTER_PROVIDERS
]);

app.routes.js

(function (app) {
  const routes = [
    { path: 'heroes', component: app.HeroesComponent }
  ];

  app.ROUTER_PROVIDERS = [
    ng.router.provideRouter(routes)
  ];
})(window.app || (window.app = {}))

app.component.js

(function (app) {
  app.AppComponent = ng.core.Component({
    selector: 'ig-app',
    directives: [ng.router.ROUTER_DIRECTIVES],
    providers: [app.HeroService],
    template:`
      <h1>{{title}}</h1>
      <a [routerLink]="['/heroes']">Heroes</a>
      <router-outlet></router-outlet>
    `
    }).Class({
      constructor: function() {
        this.title = 'Tour of Heroes';
      }
    });
})(window.app || (window.app = {}));

This loads my app with a Heroes link. But there is an error on the console

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''

And then I append /heroes to the URL, the Heroes component does not load, and I get the following error in my console

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'of' of undefined

Any pointers as to what I may be doing wrong?

EDIT

When I specify the route for '' in my routes file like so...

app.routes.js

(function (app) {
  const routes = [
    { path: 'heroes', component: app.HeroesComponent },
    { path: '', redirectTo: '/heroes', pathMatch: 'full' }
  ];

  app.ROUTER_PROVIDERS = [
    ng.router.provideRouter(routes)
  ];
})(window.app || (window.app = {}))

I get the second error I listed above on both pages. If I try setting it to the app.AppComponent I get errors which hint I should have a redirectTo

Answer 1

I completing the Angular 2 Example, Tour Of Heroes, the Routing section, use ES5.

I upload code to github.

I am using the 2.0.0-RC5 bundle. I can not solve the proble using the 2.0.0-RC4 bundle!

flowing the part code:

app.routes.js

(function(app) {
  app.routing = ng.router.RouterModule.forRoot([
    {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
    {path: 'dashboard', component: app.DashboardComponent},
    {path: 'heroes', component: app.HeroesComponent},
    {path: 'detail/:id', component: app.HeroDetailComponent}
  ]);
})(window.app || (window.app = {}));

Hope it helps you!