Lazy Loading

Relax. We'll talk through this in plain words — no textbook voice.

Lazy Loading only loads modules when they're actually needed, shrinking the initial bundle size.

typescript

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module')
      .then(m => m.AdminModule)
  },
  {
    path: 'users',
    loadChildren: () => import('./users/users.module')
      .then(m => m.UsersModule)
  }
];

// admin-routing.module.ts (inside admin folder)
const routes: Routes = [
  { path: '', component: AdminDashboardComponent },
  { path: 'users', component: AdminUsersComponent },
  { path: 'settings', component: AdminSettingsComponent }
];

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

You should see

(The Admin module loads only when you navigate to the /admin route, which improves performance)