Explain Angular Router’s lazy loading and how to implement it.

Lazy loading in Angular Router delays the loading of feature modules until their routes are accessed, reducing the initial load time and improving performance.

It is implemented by defining routes with the loadChildren property that dynamically imports feature modules on demand, enabling on-the-fly loading only when needed.

Code

const routes = [
  { path: 'home', component: HomeComponent },
  { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }
];

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