Angular router navigation changes url, but doesn't render component

4
votes

I am working on an angular application with routing and path parameter. With a button click, a function is called to redirect the user to a new URL with the same path parameter. Although the URL in the browser changes, the corresponding component defined in app-routing.module.ts is not loaded. If I refresh the page again, the correct page is rendered.

The idea is that a student gets a unique URL with a hash token (e. g. /student/33192c29aa8e449e94f3a1c4eef43ca8), which shows him some guidelines. Afterwards with a click he should be forwarded to a registration page with the same token (e. g. /student/registration/33192c29aa8e449e94f3a1c4eef43ca8)

app-routing.module.ts

const routes: Routes = [
  ...
  { path: 'student/registration/:token', component: RegistrationsComponent },
  { path: 'student/:token', component: GuidelinesComponent },
  ...
];

guidelines.component.html

forwardToRegistration(): void {
  this.router.navigateByUrl('/student/registration/' + this.studentToken);
}

The URL is updating correctly in the browser, but the RegistrationComponent is not rendered.

Thank you for your help!

2
angularredirectroutesurl-routingpath-parameter
It works when you comment your second path in routes? – Juan Antonio
Well, the URL loads correctly. Only by using the method this.router.navigateByUrl(...) the URL is changed, but the component is not rendered. If I refresh the page without any further actions, the correct page is loaded. Furthermore, the variable this.studentToken holds the Path-Parameter hash token, which is read from the ActivatedRoute Params. – sivakumm
Well, if you are able to reproduce your problem in a stackbliz project to share with us I am sure that we can help you because seems like the problem could come from other place. Please consider to build a reproducible scenario. – Juan Antonio
curious if you got this to work as I am having the same issue. – eddyizm

2 Answers

0
votes

Huh. Maybe student/registration, combined with the default pathMatch: 'prefix' setting, makes the Angular router interpret your navigateByUrl as same path navigation. Just a hypothesis.

To test that, add the pathMatch: full to the second route:

{
    path: 'student/:token',
    component: GuidelinesComponent,
    pathMatch: 'full',
}
0
votes

I had the same issue, and figured it out. Maybe your cant see the content change because you dont have router-outlet tag in the app.component.html. The url will change the content of

<router-outlet></router-outlet>

so you should placed the router-outlet tag in the app.component.html.