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

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

在ng11路由器事件的注销,该功能模块被加载,并RouteConfigLoadStartRouteConfigLoadEnd与适当的儿童路由器的配置都被触发,但是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>

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

因此,经过大量的构建工作,我已经弄清楚了!我们在混合环境中执行此操作,在混合环境中,服务器绑定的JSF容器内部有一个“ SPA”,并且标头为Angular Element。到目前为止,我一直在使用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是拼接事情,这是问题的外部在一起。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章