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!

Brien

It works when you comment your second path in routes? – Sonneteer

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. – Brien

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. – Sonneteer

curious if you got this to work as I am having the same issue. – Kinfolk

Have you been able to solve this? I am facing the same problem. – Hocuspocus

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.

Demijohn

router outlet is there, but stll not workin – Mitinger

Answer 2

@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]);
    } 

Asyut

Thakns for that! I moved the block of code that is initializing the variables inside the subscription of the activatedRoute and it worked! – Usually

Answer 3

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.

Philae

this seemed to work, but upon closer inspection, is leading to all sorts of unintended consequences. the subscription is firing 'a lot', and often w null parameters... – Asyut

Answer 4

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

Gleanings

I already tried this method, but unfortunately, it didn't work. There's still the same problem. – Brien

Answer 5

I had the same issue, but in my case it was because I had put my wildcard route at the top of my routing configuration....

export const routes: Routes = [
    { path: '**', component: HomePageComponent},
    { path: 'client-list', component: ClientListComponent},
];

Fixed by making wildcard last:

export const routes: Routes = [
    { path: 'client-list', component: ClientListComponent},
    { path: '**', component: HomePageComponent},
];

Icosahedron