multi level module with lazy loading is not working

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?

There is no sense in importing them, totally defeats the concept of lazyloading. if you use augury extension you would even notice a duplication in your routes!! refer to the documentation — JSON
– JSON, Commented Mar 4, 2018 at 9:02

Bunyamin Coskuner · Accepted Answer · 2018-02-27 06:01:34Z

6

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

answered Feb 27, 2018 at 6:01

Bunyamin Coskuner

8,8792 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

multi level module with lazy loading is not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related