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

So, after a lot of playing with our build, I've figured it out! We're doing this in a blended environment where we have an "SPA" inside of a server-bound JSF container with the header as an Angular Element. Up until this point, I'd been using ng-build-plus and --extra-webpack-config to specify webpack.externals to share the common resources between the header and the SPA:

module.exports = {
    externals: {
        "rxjs": "rxjs",
        "@angular/core": "ng.core",
        "@angular/common": "ng.common",
        "@angular/common/http": "ng.common.http",
        "@angular/platform-browser": "ng.platformBrowser",
        "@angular/platform-browser-dynamic": "ng.platformBrowserDynamic",
        "@angular/compiler": "ng.compiler",
        "@angular/forms": "ng.forms"
    }
}

After taking this out of the SPA build, everything started working as expected. Looks like it might be an issue with how ngx-build-plus is stitching things together with externals that was the issue.

Answer 2

I just upgraded to Angular 11.

Try this

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

Answer 3

I just did a quick mockup of this app and ran into routing issues after upgrading to v11.0.2. In my case it was the 'useHash' in the AppRoutingModule that was the problem. It worked fine in v10.2.3 but after upgrading when I tried to navigate it would set the route to the base url which would just redirect back to the dashboard. It was like the routes weren't recognized.

Have you tried removing the 'useHash' router config value?

UPDATE

I noticed your comment about not being able to reproduce this on StackBlitz. Have you considered deleting your node_modules folder and reinstalling them? I have had issues in the past where this was the solution.

Answer 4

After upgrading to Angular 11, this issue was resolved for me by creating a new app-routing.module and cutting and pasting routes previously defined in app.module to the new module. Then import AppRoutingModule to AppModule.

Reversing the changes reintroduced the problem.

I can't explain the reasons for that, but it worked.

Answer 5

I experienced the same behavior when I added a canActivate and a canLoad guard to a route that contained a loadChildren to lazily load another routing module.

When I added the guards to the root node of the other routing module, the problem was gone and the behavior is basically the same.