Lazy Loading - On-Demand Squads

Lazy loading is a technique for loading modules only when they are needed - like dispatching squads only when the need arises.

Lazy Loading Configuration

1// app-routing.module.ts
2const routes: Routes = [
3  { path: '', redirectTo: '/home', pathMatch: 'full' },
4  { path: 'home', component: HomeComponent },
5
6  // Lazy loaded modules
7  {
8    path: 'samurai',
9    loadChildren: () => import('./features/samurai/samurai.module')
10      .then(m => m.SamuraiModule)
11  },
12  {
13    path: 'dojo',
14    loadChildren: () => import('./features/dojo/dojo.module')
15      .then(m => m.DojoModule)
16  }
17];
18
19@NgModule({
20  imports: [RouterModule.forRoot(routes)],
21  exports: [RouterModule]
22})
23export class AppRoutingModule { }

Routing in a Feature Module

1// features/samurai/samurai-routing.module.ts
2const routes: Routes = [
3  { path: '', component: SamuraiListComponent },
4  { path: ':id', component: SamuraiDetailComponent },
5  { path: ':id/edit', component: SamuraiFormComponent }
6];
7
8@NgModule({
9  imports: [RouterModule.forChild(routes)],  // forChild, not forRoot!
10  exports: [RouterModule]
11})
12export class SamuraiRoutingModule { }

Benefits of Lazy Loading

| Aspect | Without Lazy Loading | With Lazy Loading | |--------|----------------------|-------------------| | Initial Bundle | Entire application | Only core + home | | Load time | Long | Short | | Memory | Everything at once | On demand | | UX | Long wait | Quick start |