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

Question

I have this multi level module with each routing module, but only the first routing module is working, the second module is not.

Each module is lazy loading, with default path is aim to the first module.

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

Hierarchy

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

the main module routing is working just fine, but the register module is not, there is no error or anything, but anything I put in the register module routing AND the features module routing is not working and always get to 'Page Not Found' component which I declared in main module routing.

the reason why I put main module and register module separate is because the main module have this header and footer which I don't want to show in register, then the 'Page Not Found' can get the header and footer.

how to tackle this issue with still having multi level module routing?

Answer 1

When you want to lazy load some modules in your angular applications, NEVER EVER import them anywhere.

In your app module, you are importing FeaturesModule which breaks the lazy loading. So, delete FeaturesModule import from app.module.ts Likewise, you should delete MainModule , RegisterModule from features.module.ts

What this does is that redefine path: '' multiple times.

I, also, noticed that you are importing CoreModule in lazy loaded modules. I assume your CoreModule provide some services. Importing a module, which provides services, in a lazy loaded module will result in different instances of services. Lazy loaded modules have their own dependency injection mechanism.

For more information check the docs