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

Question

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

在 ng11 的路由器事件中注销，功能模块被加载，RouteConfigLoadStart 和 RouteConfigLoadEnd 都被正确的子路由器配置触发，但 RoutesRecognized 不是叫。如果我第二次单击 link（而不是 routerLink），所有事件都会正常触发并加载适当的组件。

澄清一下：这不仅仅是 linking 的问题。它在初始页面加载时也不起作用，除非我转到不同的路线（第一次也不会加载），然后回到原来的路线

此设置在 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 模板

<router-outlet></router-outlet>

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

Answer 1

我刚升级到Angular11.

试试这个

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

Answer 2

我刚刚制作了这个应用程序的快速模型，并在升级到 v11.0.2 后运行解决了路由问题。在我的例子中，问题出在 AppRoutingModule 中的 'useHash' 。它在 v10.2.3 中运行良好，但升级后，当我尝试导航时，它会将路由设置为基础 url，这只会重定向回仪表板。就像无法识别路线一样。

您是否尝试删除 'useHash' 路由器配置值？

更新

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

Answer 3

所以，在反复尝试我们的构建之后，我已经弄明白了！我们在混合环境中执行此操作，我们在 server-bound JSF 容器内有一个“SPA”，其中 header 作为 Angular 元素。到目前为止，我一直在使用 ng-build-plus 和 --extra-webpack-config 来指定 webpack.externals 以在 header 和 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 如何将事物与外部事物拼接在一起的问题。

Answer 4

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

撤销更改重新引入了问题。

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

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

Lazy Loaded Routing Problem after Upgrade to Angular 11

angular

angular-routing

angular-router

angular-router-events

angular11