CODEWITHSUNDEEP
javascriptangularjsangular
Igbanam
Igbanam

Reputation: 6082

How to route in Angular 2 using Javascript

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

Upvotes: 6

Views: 1520

Answers (4)

Fan TianYi
Fan TianYi

Reputation: 417

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!

Upvotes: 1

Norbert Huurnink
Norbert Huurnink

Reputation: 1316

As others say, you need the route for ''. Your second error is probably in your heroescomponent code.

Upvotes: 0

Akshay Rao
Akshay Rao

Reputation: 3544

All you are missing is a path for your empty route ' '...

you can do this by adding a route as below in your app.routes.js file 

 { path: '', redirectTo: '/your_path' ,pathMatch: 'full' }

that's it bro :)

Upvotes: 0

smyk
smyk

Reputation: 371

Angular does not know what to display in the <router-outlet> before you navigate to the heroes path. You need to define the route for the empty ('') path and create HomeComponent, EmptyComponent or whatever suits your needs. Or you can define redirect for the empty path.

Upvotes: 0

Related Questions