5

我有一个顶级路由器，可以延迟加载子路由功能模块，升级到 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>

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

4

4 回答 4

3

我刚刚升级到 Angular 11。

尝试这个

imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
于 2020-11-19T18:56:05.797 回答
2

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

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

更新

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

于 2020-11-27T21:36:46.410 回答
0

所以，在玩了很多我们的构建之后，我想通了！我们在混合环境中执行此操作，其中我们在服务器绑定的 JSF 容器内有一个“SPA”，其标头作为 Angular 元素。到目前为止，我一直在使用ng-build-plusand--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将事物与外部缝合在一起。

于 2020-11-30T15:18:01.540 回答
0

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

扭转这些变化重新引入了问题。

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

于 2021-01-08T16:05:49.410 回答