升级到 Angular 11 后的延迟加载路由问题答案

【问题标题】：Lazy Loaded Routing Problem after Upgrade to Angular 11升级到 Angular 11 后的延迟加载路由问题
【发布时间】：2021-03-03 04:11:28
【问题描述】：

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

在 ng11 中退出路由器事件，加载功能模块，RouteConfigLoadStart 和 RouteConfigLoadEnd 都通过正确的子路由器配置触发，但未调用 RoutesRecognized。如果我再次点击链接（不是routerLink），所有事件都会正常触发并加载相应的组件。

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

此设置在 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 { }

仪表板路由模块

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

AppComponent 模板

<router-outlet></router-outlet>

我很乐意提供任何可能有助于深入了解此问题的其他详细信息。提前致谢。

【问题讨论】：

您介意为此创建一个堆栈闪电战吗？
你能详细说明你为什么不使用routerLink吗？我不确定角度路由器实际上是否支持使用标准链接。
请提供相同的stackbitz。
@Qortex 我必须从基于 JSF 的旧应用程序链接到应用程序。应该支持使用标准链接，它们在 ng10 中工作。如果您刷新页面，它在初始加载时也不起作用。
@AakashGarg 不幸的是，我还无法让 SB 来复制该问题。我仍在尝试，以便能够对问题进行逆向工程。如果我可以在 SB 中复制它，我会将它添加到问题中。

标签： angular angular-routing angular-router angular-router-events angular11

【解决方案1】：

我刚刚升级到 Angular 11。

试试这个

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

【讨论】：

感谢您的回复。我使用ng update 进行更新，它会自动为我添加。我将其删除以查看是否是问题所在，但事实并非如此。该修复似乎特定于routerLinks，我使用标准<a href=... 链接到页面

【解决方案2】：

我刚刚做了这个应用程序的快速模型，升级到 v11.0.2 后遇到了路由问题。就我而言，问题在于 AppRoutingModule 中的“useHash”。它在 v10.2.3 中运行良好，但在升级后当我尝试导航时，它会将路由设置为基本 url，该基本 url 只会重定向回仪表板。就像无法识别路线一样。

您是否尝试过删除“useHash”路由器配置值？

更新

我注意到您关于无法在 StackBlitz 上重现此内容的评论。您是否考虑过删除 node_modules 文件夹并重新安装它们？我过去曾遇到过问题，这是解决方案。

【讨论】：

【解决方案3】：

所以，在玩了很多我们的构建之后，我想通了！我们在混合环境中执行此操作，其中我们在服务器绑定的 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如何将事物与外部缝合在一起的问题，这是问题所在。

【讨论】：

【解决方案4】：

升级到 Angular 11 后，我通过创建新的 app-routing.module 并将之前在 app.module 中定义的路由剪切并粘贴到新模块中解决了这个问题。然后将 AppRoutingModule 导入 AppModule。

撤消更改会重新引入问题。

我无法解释其中的原因，但它奏效了。

【讨论】：