延迟加载到Angular 2中的空路由以外的路由

Posted 2023-02-19

【中文标题】延迟加载到Angular 2中的空路由以外的路由

【英文标题】：Lazy Load to route other than empty route in Angular 2

【发布时间】：2017-10-19 07:51:03

【问题描述】：

我的app-routing.module.ts 如下：

从'@angular/core'导入 NgModule ； 进口 路线， 路由器模块 来自'@angular/router'； 常量路线：路线= [ 路径：'重置'， loadChildren: 'app/auth/reset-password-form/reset-password-form.module#ResetPasswordFormModule' , 路径：'验证'， loadChildren：'app/auth/verify-user-form/verify-user-form.module#VerifyUserFormModule' , 路径：'404'， loadChildren: 'app/route-not-found/route-not-found.module#RouteNotFoundModule' , 小路 ： ''， 路径匹配：'完整'， loadChildren: 'app/landing-page/landing-page.module#LandingPageModule' , 小路 ： '**'， 重定向到：'/404' , ]; @NgModule( 进口：[RouterModule.forRoot(routes)]， 出口：[路由器模块] ) 导出类 AppRoutingModule

当我导航到localhost:4200时，它会正确加载landing-page.module，但是，当我输入localhost:4200/reset或localhost:4200/verify或localhost:4200/404时，它不会加载相关模块，而是加载landing-page.module 自动。

我该如何解决这个问题？

【问题讨论】：

还有问题吗？你的问题是路线的顺序，首先你必须设置''路径，最后你必须设置'**'

我有一个类似的问题，延迟加载的路由转到另一个延迟加载的模块......我得到相当于你的“验证”模块被错误地加载以响应“重置”路径

【参考方案1】：

您必须将路由添加到您的子模块

  const routes: Routes = [
   path: '', component: ResetComponent
  ];
  const ROUTES: ModuleWithProviders = 
  RouterModule.forChild(routes);

并在子模块中导入ROUTES（ResetModule）

@NgModule(
 imports: [
    CommonModule,
    ROUTES,
    ],
 declarations: [ResetComponent],
 exports: [ResetComponent]
)

【参考方案2】：

由于您在imports:[ ] 或AppModule（或任何其他模块文件）中添加的导入，可能会发生此问题。

确保从导入数组中删除所有延迟加载的模块。

例如：我有三个模块，分别命名为：HomeModule、ProfileModule 和 SettingsModule。 如果HomeModule 被延迟加载，ProfileModule 和SettingsModule 被延迟加载，那么AppModule(app.module.ts) 中的imports:[] 应该如下所示：

imports:[HomeModule] 不应包含ProfileModule 或SettingsModule，因为它们会在运行时自动加载。