Lazy Loaded Routing Problem after Upgrade to Angular 11

Question

I have a top-level router that lazy loads child-routed feature modules, that has stopped working properly after upgrading to Angular v11.0.1.

Logging out at the Router events in ng11, the feature module is loaded, and RouteConfigLoadStart and RouteConfigLoadEnd are both triggered with the proper child router configuration, but RoutesRecognized is not called. If I click on the link (not routerLink) a second time, all events are triggered normally and the appropriate component loads.

For clarification: This is not just a problem with linking. It Doesn't work on initial page load either, unless I go to a different route (which also doesn't load the first time), and then back to the original route

This setup works properly (i.e. with a single click and on initial load) in Angular v10.2.3

AppRoutingModule:

const routes: Routes = [
    {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
    {path: 'browse', loadChildren: () => import('./browse/browse.module').then(m => m.BrowseModule)},
    {path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)},
    {path: '**', redirectTo: '/dashboard'}
];

@NgModule({
    imports: [RouterModule.forRoot(routes, {useHash: true})],
    exports: [RouterModule]
})
export class AppRoutingModule { }

DashboardRoutingModule

const routes: Routes = [
    {path: '', component: DashboardComponent},
    {path: ':id', component: DashboardComponent}
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class DashboardRoutingModule { }

AppModule

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    providers: [{provide: APP_BASE_HREF, useValue: ''}],
    bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent template

<router-outlet></router-outlet>

I'm happy to provide any additional details that might help get to the bottom of this. Thanks in advance.

Answer 1

I just upgraded to Angular 11.

Try this

imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],