Angular : router.navigate not loading components on some pages

Question

I updated Angular from 10 to 12, and after the migration some pages of my website no longer load the components with a router.navigate (or a routerLink for that matter), although the URL is changed and correct (if I refresh, the right content is loaded). From what I understand this could come from the routing-table, but I don't really see how that would explain it since it worked back in angular 10.

Shell.childRoutes([
    {
      path: '',
      component: LoginComponent,
      canActivate: [RedirectionGuardService],
      pathMatch: 'full'
    },
    {
      path: 'component1',
      component: componentComponent1,
      data: { title: marker('Component1'), data: { roles: ['Role.USER'] } },
    },
    {
      path: 'component2/:query',
      component: component2Component,
      data: { title: marker('component2') },
      resolve: { data: component2Resolver },
    },
    {
      path: 'component3/:id/:value',
      component: component3Component,
      resolve: { data: component3Resolver },
      data: { title: marker('component3') },
    },
    {
      path: 'component4/:id',
      component: component4Component,
      resolve: { data: component4Resolver },
      data: { title: marker('component4') },
    },
    {
      path: 'component5/:id',
      component: component5Component,
      resolve: { data: component3Resolver },
      data: { title: marker('component5') },
    },
  ]),
  {
path: 'waitingComponent',
component: waitingComponent,
data: { title: marker('Waiting') },
  },
  {
path: 'uploadModal/:id/:value',
component: UploadModalComponent,
data: { title: marker('Upload Content') },
  },
  {
path: 'faq',
component: FAQComponent,
  },

In the code I provided, router.navigate doesn't work in component2 or uploadComponent but works in component1 or component3.

If it's a matter of how the router.navigate is written:

this.router.navigate(['/component3/',this.value1, this.value2]);

(This is used by the UploadComponent as an example).

I also tried it with a fixed value to try, and it doesn't change the situation. The URL changes, but not the component.

I don't receive any errors during compiling or with the browser (console or network).

Any help would be of value.

Answer 1

Okay I found what was causing the problem, took me a while but here it is.

In the configuration of RouteReuseStrategy the parameter shouldReuseRoute was wrongly configured, during the change between Angular 10 and 11 something changed and the former configuration was no longer up to the standards of Angular.

The configuration should look something like this :

return future.routeConfig === current.routeConfig;

Hopefully this will help people who also had this problem during a migration from Angular 10 to Angular 11.