Lazy-loading in feature modules- Angular

Question

The app stays here: https://angular-dqpbqa.stackblitz.io. what mistake am i doing? and it also loads heroes-list initially, but the path is ''.

lazyloading of feature modules is not working. i have created separate routing in each feature module. dynamically loading the module using loadchildren property

const routes: Routes = [
{ path: 'dashboard',
  loadChildren: () => import('./dashboard/dashboard.module').then(mod => 
mod.DashboardModule)
},
 { path: 'heroes',
  loadChildren: () => import('./heroes/heroes.module').then(mod => 
mod.HeroesModule)
},
{ path: 'detail/:id',
  loadChildren: () => import('./hero-detail/hero-detail.module').then(mod 
=> mod.HeroDetailModule)
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
},

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

stackblitz-editable: https://stackblitz.com/edit/angular-dqpbqa

Please paste the code along with the question - this ensures that the question retains its validity if/when the external link dries out. Also, what doesn't work? What is the expected functionality you are expecting? Please have a look around and read through the [help center](https://stackoverflow.com/help). In particular [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) — Nicholas K, Jan 10 '20 at 07:58

Pastabolo · Accepted Answer · 2020-01-10T08:18:32.530

3

HeroesModule is not lazy-loaded because it is imported in app.module.ts <= that's the mistake

@NgModule({
  imports: [ /* ... */ HeroesModule, /* ... */ ]
})
export class AppModule { }

There, HeroesModule is initially loaded and the app has access to the routes of heroes-routing.module.ts

So when you navigate to '', the path will match the path '' defined in your heroes-routing.module.ts which display the HeroesComponent

edited Jan 10 '20 at 08:18

answered Jan 10 '20 at 08:10

Pastabolo

234
1
5

yes i am importing all the feature modules in 'app.module.ts', what's wrong in this ? @NgModule({ imports: [ BrowserModule, FormsModule, HeroesModule,HeroDetailModule, MessagesModule, AppRoutingModule, DashboardModule ], declarations: [ AppComponent, HelloComponent,], bootstrap: [ AppComponent ], providers: [HeroService, MessageService] }) export class AppModule { } – Vinay Jan 10 '20 at 08:50
1

If you import them in ``app.module.ts``, they are eagerly loaded, they are available at initialization. Remove them (``HeroesModule``, ``HeroDetailModule``, ``DashboardModule``) from this imports array and they will be lazy-loaded through the ``app-routing.module.ts`` – Pastabolo Jan 10 '20 at 08:56
i had made changes as suggested, but how do i verify my modules lazyloaded, since i don't see 'chunk.js' in network tab. – Vinay Jan 10 '20 at 09:09
It seems that you can't see your chunk via Stackblitz. Check this out on your local machine (I just gave it try and it works, I can see ``mylazy-mylazy-module.js`` in the Network tab when I navigate to my lazy route – Pastabolo Jan 10 '20 at 09:37

Lazy-loading in feature modules- Angular

1 Answers1