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.

Can you elaborate on why you don't use `routerLink`? I'm not sure using standard links is supported by angular router actually. — Qortex, Nov 24 '20 at 08:26
@Qortex I'm having to link to the application from an legacy JSF-based app. Using standard links should be supported, they work in ng10. It doesn't work on initial load either, if you refresh the page. — Cineris, Nov 27 '20 at 04:35
@AakashGarg I've not been able to get a SB to replicate the issue yet, unfortunately. I'm still trying to though, to be able to reverse engineer the issue. If I can replicate it in SB, I'll add it to the question. — Cineris, Nov 27 '20 at 04:36
Have you already found a reason of this issue? I'm facing same problem right now after project upgraded to Angular 11. Lazy loaded module routing flow ends with RouteConfigLoadEnd event. btw: I'm using webpack dev stack not the Angular CLI. — Michael Dudek, Dec 02 '20 at 17:36

score 3 · Answer 1 · answered Nov 19 '20 at 18:56

3

I just upgraded to Angular 11.

Try this

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

answered Nov 19 '20 at 18:56

Ondie

151
5

1

Thanks for the response. I used `ng update` to do the update, and it automatically added that for me. I removed it to see if that was the issue, but it wasn't. That fix seems to be specific to `routerLink`s and I'm linking to the pages with standard ` – Cineris Nov 19 '20 at 19:05

Andrew Alderson · Answer 2 · 2020-11-28T20:27:08.777

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.

Cineris · Accepted Answer · 2020-11-30T19:56:26.333

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.

score 0 · Answer 4 · answered Jan 08 '21 at 16:05

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.

score 0 · Answer 5 · answered Feb 22 '23 at 15:14

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.

Lazy Loaded Routing Problem after Upgrade to Angular 11

5 Answers5