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

Question

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!

Answer 1

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.

Answer 2

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',
}

Answer 3

@RobLasch almost had it.

in short, you want to subscribe to activatedRoute.params. You do not want to subscribe to the entire activatedRoute.

here is a great video that walks you through it https://codecraft.tv/courses/angular/routing/parameterised-routes/

i dont see the component constructor in ops posting, so here is the one I have...

this works and inspecting the console, you are not getting any extra iterations... it just behaves like you would expect!

component constructor...

  constructor( 
              private activatedRoute : ActivatedRoute) {
        
                 
                this.activatedRoute.params.subscribe( (data) => {
                     
                    const id = this.activatedRoute.snapshot.paramMap.get('token');
                    console.log('router subscription fired token:' + token);
                    if(null == token) return;
                    this.getDetail();   //do whatever you need to do
                  })
        }

callingcomponent.ts

  itemClicked(evt: MouseEvent, item_: project) {
           
           
          this.router.navigate(['/students/' + item_.token]);
    } 

Answer 4

I solved it by listening to router changes in the component which should be refreshed.

Step 1. In app.component.ts: Navigate to component (orphan) and pass an object with a variable tableName.

this.router.navigate( ['/orphan', {table:tableName} ] );

Step 2. In orphan.component.ts, subscript to the observable to detect router changes and get the tableName from the snapshot object :

constructor( private route:ActivatedRoute, private router:Router) { 
      /* Listen for router events through the observable */
      router.events.subscribe( (data) => {
        // get the data from the snapshot
        this.tableName = this.route.snapshot.params.table;
      })
}

The component Orphan is now refreshed with the tableName value.