Search code examples
angularangular2-routingangular-routingangular15

ActivatedRouteSnapshot looses all values between Router Events

I have Angular 15 application and I want to integrate a router to it. I've created Routing Module:

const routes: Routes = [ // for example
  {path: "dashboard/:code", title: "SectionsWrapper", component: SectionsWrapperComponent},
  {path: "", title: "SectionsWrapper", component: SectionsWrapperComponent},
  {path: "**", title: "SectionsWrapper", component: SectionsWrapperComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true, enableTracing: true, initialNavigation: "enabledBlocking"})], // used enabledBlocking because routing won't work without it at all
  exports: [RouterModule]
})
export class RoutingModule { }

and imported it in the main module. I've placed <router-outlet></router-outlet> inside the main's component html.

For now, when I try to open the application with url localhost:4200/#/dashboard/some-code router-outlet doesn't insert the component for me. The same for changing URL in browser's top bar after the application being opened. However, when I add a button to that html page:

<a routerLink="/dashboard/some-code" routerLinkActive="active">Go</a>

and navigate manually by clicking it, everything works fine, I have my component inserted.

I enabled the tracing mode, refreshed the page and I saw that my ngOnInit from main component fired first, then I saw tracing logs, but they stopped after ResolveEnd event. Also after ActivationStart all route's data (not the actual property, but all properties) are lost and I see nulls and empty strings there:

enter image description here

ActivationStart:

enter image description here

GuardsCheckEnd and further:

enter image description here

Solution

  • It turned out that the router could not work because the main component was not created in bootstrap, but due to the creation of a custom element from the @angular/elements library. Adding this.router.initialNavigation(); to module's constructor helped.

    More details on this question: Angular Router ignores URL, when using custom ngDoBootstrap and createCustomElement