具有延迟加载的多级模块无法正常工作

Question

我有每个路由模块的这个多级模块,但只有第一个路由模块工作,第二个模块不工作.

每个模块都是延迟加载,默认路径是针对第一个模块.

app.module

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CoreModule,
    SharedModule,
    FeaturesModule,

    RouterModule.forRoot([
      { path: '', loadChildren: './features/features.module#FeaturesModule'}
    ]),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

features.module

@NgModule({
  imports: [
    CoreModule,
    FeaturesRoutingModule,
    MainModule,
    RegisterModule
  ]
})

//routing
const routes: Routes = [
 { path: '', loadChildren: './main/main.module#MainModule' },
 { path: NAVIGATIONS.REGISTER, loadChildren: './register/register.module#RegisterModule' },
 ];

main.module

@NgModule({
  imports: [
    CoreModule,
    SharedModule,
    MainRoutingModule,
    MainFeaturesModule
  ],
 /..../})

// routing
const routes: Routes = [
  {
    path: '', component: MainPageComponent,
    children: [
      { path: '', component: LandingPageComponent },
      /..../
      { path: NAVIGATIONS.EXPLORE, loadChildren: './main-features/explore/explore.module#ExploreModule'},
      { path: '**', component: NotfoundPageComponent }
    ]
  }
];

register.module

@NgModule({
  imports: [
    CoreModule,
    SharedModule,
    RegisterRoutingModule
  ],
  /.../})

// routing
const routes: Routes = [
  { path: '', component: RegisterPageComponent }
];

等级制度

app.module
  |
  L features.module // lazy load default
       |
       L main.module // lazy load default
       |
       L register.module

主模块路由工作正常,但寄存器模块不是,没有错误或任何东西,但我放入寄存器模块路由和功能模块路由不起作用,总是到"找不到页面"组件我在主模块路由中声明了.

我把主模块和寄存器模块分开的原因是因为主模块有这个页眉和页脚,我不想在寄存器中显示,然后'找不到页面'可以得到页眉和页脚.

如何解决这个问题还有多级模块路由？

Answer 1

当您想在角度应用程序中延迟加载某些模块时,永远不要将它们导入任何地方.

在您的应用程序模块中,您正在导入FeaturesModule,这会破坏延迟加载.因此,删除FeaturesModule从进口app.module.ts同样的,你应该删除MainModule,RegisterModule从features.module.ts

这样做是path: ''多次重新定义.

我也注意到你是CoreModule在延迟加载的模块中导入的.我假设你CoreModule提供一些服务.在延迟加载的模块中导入提供服务的模块将导致不同的服务实例.延迟加载的模块有自己的依赖注入机制.

有关更多信息,请查看文档