升级到 Angular 11 后出现延迟加载路由问题

Question

我有一个顶级路由器，它延迟加载子路由功能模块，在升级到 Angular v11.0.1 后已停止正常工作。

在 ng11 中的路由器事件处注销时，功能模块会被加载，并且RouteConfigLoadStart和RouteConfigLoadEnd都会通过正确的子路由器配置触发，但RoutesRecognized不会被调用。routerLink如果我第二次单击该链接（而不是），所有事件都会正常触发并加载相应的组件。

澄清一下：这不仅仅是链接的问题。它也不适用于初始页面加载，除非我转到不同的路线（第一次也不会加载），然后返回原始路线

此设置在 Angular v10.2.3 中可以正常工作（即只需单击一次并在初始加载时）

应用路由模块：

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 { }

仪表板路由模块

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

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

应用程序模块

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

应用组件模板

<router-outlet></router-outlet>

我很高兴提供任何可能有助于查明真相的其他详细信息。提前致谢。

Answer 1

所以，在对我们的构建进行了大量的尝试之后，我已经弄清楚了！我们在混合环境中执行此操作，其中服务器绑定的 JSF 容器内有一个“SPA”，其标头作为 Angular 元素。到目前为止，我一直在使用ng-build-plus和--extra-webpack-config来指定webpack.externals在标头和 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"
    }
}

将其从 SPA 构建中删除后，一切都开始按预期工作。看起来这可能是一个如何ngx-build-plus将事物与外部缝合在一起的问题。