Angular 4 routing works for only one next route

0
votes

I am facing a strange issue in Angular 2 route where I am able to route to next page ONLY but unable to route from that page.

I have 4 components: Home, Search Result, Profile and Admin.

When I first arrive to Home component, I can navigate to Search Result but from search result I cannot navigate to anywhere except to Home component.

The home component and app topbar contains the same logic (same code) and the topbar logic is working fine for all pages while navigation. i.e. when I naviate from any page to search result page from top bar button, I am able to navigate to next page and any other pages.

My Route:

{path: '', component: HomeComponent},
{path: 'seachresult', component: SearchResultComponent},
{path: ':code', component: ProfileComponent},
{path: 'admin/account', component: AdminComponent}

Here, in above HomeComponent, I tried the following:

  • Replaced the '' by 'home'

{path: 'home', component: HomeComponent},

  • Updated the route as below:

{path: '', redirectTo: 'home ', pathMatch: 'full'}, {path: 'home', component: HomeComponent},

  • Redirected directly from the routerLink of button to search result page

None of above could solve the issue.

While click on search button, following code is executed:

this.router.navigate(['vendors', 'pokhara']);

Following are the version in package.json:

  • "rxjs": "^5.2.0",
  • "@angular/router": "^4.1.0",
1
angularangular2-routing
Why are you using Angular 4 router if you are on Angular 2 app? – Ploppy
Would be helpful if you can provide a plunker – Aamir Khan
@Ploppy "@angular/animations": "^4.1.0", "@angular/common": "^4.1.0", "@angular/compiler": "^4.1.0", "@angular/core": "^4.1.0", "@angular/forms": "^4.1.0", "@angular/http": "^4.1.0", "@angular/platform-browser": "^4.1.0", "@angular/platform-browser-dynamic": "^4.1.0", "@angular/router": "^4.1.0" Actually, I was working in a template which has the following things in package.json. So, I think it would have said angular 4 – Sushil Paudel
can you show us you app.component.html – Exterminator
I think your issue is with the setting up of path in router.navigate. There is a possibility. Kindly share you code on stackblitz so that we may assist you better. Thank you :) – Wahab Shah

1 Answers

0
votes

Hope you might have solved this issue but still , If you not able to route by using router.navigate, why not use router link or routeBy Url in .ts 

import { Router } from '@angular/router';
....
 constructor(private router : Router){}
...
functionClick(){
this.router.navigateByUrl('/code');  // or any path
}

or directly in html use 

<span routerLink="/code"></span>