Angular 4 routing works for only one next route

Question

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",

Why are you using Angular 4 router if you are on Angular 2 app? — Ploppy
– Ploppy, Commented Nov 9, 2017 at 11:04
@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
– Sushil Paudel, Commented Nov 9, 2017 at 12:55
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
– Wahab Shah, Commented Apr 8, 2020 at 7:21

T. Shashwat · Accepted Answer · 2018-10-11 11:41:58Z

0

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>

answered Oct 11, 2018 at 11:41

T. Shashwat

1,16510 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 4 routing works for only one next route

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related