angular - 具有延迟加载的多级模块不起作用

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' },
 ];

ma​​in.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

主模块路由工作得很好，但寄存器模块没有，没有错误或任何东西，但是我放在寄存器模块路由和功能模块路由中的任何东西都不起作用，总是进入“Page Not”找到了我在主模块路由中声明的组件。

之所以将主模块和注册模块分开，是因为主模块有这个页眉和页脚，我不想在注册中显示，然后'Page Not Found'可以得到页眉和页脚。

如何在仍然具有多级模块路由的情况下解决这个问题？

Answer 1

当您想在 Angular 应用程序中延迟加载某些模块时，永远不要在任何地方导入它们。

在您的应用程序模块中，您正在导入 FeaturesModule 以打破延迟加载。所以，删除 FeaturesModule import from app.module.ts 同样，你应该删除 MainModule, RegisterModule from features.module.ts

这样做的目的是多次重新定义 path: ''。

我还注意到您正在延迟加载的模块中导入 CoreModule。我假设您的 CoreModule 提供一些服务。在延迟加载模块中导入提供服务的模块将导致不同的服务实例。延迟加载模块有自己的依赖注入(inject)机制。

更多信息check the docs