延迟加载的多级模块不起作用答案

【问题标题】：multi level module with lazy loading is not working延迟加载的多级模块不起作用
【发布时间】：2018-08-06 16:26:17
【问题描述】：

我每个路由模块都有这个多级模块，但只有第一个路由模块在工作，第二个模块不工作。

每个模块都是延迟加载的，默认路径指向第一个模块。

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

主模块路由工作正常，但注册模块没有，没有错误或任何东西，但是我在注册模块路由中放入的任何内容和功能模块路由都不起作用并且总是进入'页面没有找到我在主模块路由中声明的组件。

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

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

【问题讨论】：

你能分享NAVIGATIONS常量吗？
导入没有意义，完全违背了lazyloading的概念。如果您使用augury 扩展名，您甚至会注意到您的路线重复！参考documentation

标签： angular module routing lazy-loading angular-routing

【解决方案1】：

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

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

它的作用是多次重新定义path: ''。

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

欲了解更多信息check the docs

【讨论】：