Q1. What is lazy loading in Angular?
Lazy loading is a technique where feature modules are loaded on demand rather than when the application starts. This reduces initial bundle size and improves startup time. Routes can be configured to load modules only when the user navigates to them, using loadChildren in route configuration.
Q2. How do you configure lazy loading?
In the route configuration, use loadChildren instead of component. Example:
{
path: ''admin'',
loadChildren: () => import(''./admin/admin.module'').then(m => m.AdminModule)
}
Q3. What are the benefits of lazy loading?
Reduces initial bundle size, faster initial load, better performance, and code splitting. Users only download what they need. It also improves perceived performance and can lower bandwidth usage.
Q4. How does lazy loading work with routing?
When the router matches a path configured with loadChildren, it loads the module''s JavaScript file (chunk) via dynamic import. After the module loads, the router uses its routes (configured with forChild) to resolve the component. This is seamless to the user.
Q5. Can you preload lazy-loaded modules?
Yes, Angular provides preloading strategies. Use PreloadAllModules to preload all lazy modules after the initial load. Or create a custom preloading strategy. Configure with RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }).