Geek Answers Handbook

How to get directions in Angular 2 using Javascript

I follow the Tour of Heroes tutorial ; in the Routing section. I am using the 2.0.0-RC4 package.

I successfully reorganized the AppComponent into a wrapper for HeroesComponent . I also added routes, downloaded the necessary files, and performed the necessary download.

index.js - it was necessary to add a router for the browser platform, because this is what I read in the source of ng-router ; 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 downloads my application using the Heroes link. But there is an error on the console.

EXCEPTION: Error: not available (in promise): error: routes cannot match: ''

And then I add /heroes to the url, the Heroes component does not load, and the following error appears on my console.

EXCEPTION: Error: uncleanness (in the promise): TypeError: cannot read the 'of' property from undefined

Any guidance on what I may be doing wrong?

EDIT

When I specify the route for '' in the routes file, for example ...

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 mentioned above on both pages. If I try to install it on app.AppComponent , I get errors that suggest that I should have redirectTo

+6
source share
4 answers

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

I am uploading code to github .

I am using the 2.0.0-RC5 package. I can not solve the problem with the 2.0.0-RC4 package!

current 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 this helps you!

+1
source

Angular does not know what to show in <router-outlet> before , you go to the path of heroes. You need to determine the route for the empty path ('') and create a HomeComponent, EmptyComponent or something that suits you. Or you can define a redirect for an empty path.

0
source

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

you can do this by adding the route below in the app.routes.js file

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

so he takes :)

0
source

As others say, you need a route for. '' Your second mistake is probably in the code of your hero.

0
source

More articles:


All Articles