What is lazy loading in Angular and how does it improve performance?
Understand Angular lazy loading with loadChildren and loadComponent — how code splitting shrinks the initial bundle and improves load time and Core Web Vitals.
Expected Interview Answer
Lazy loading is a technique where Angular loads feature areas of an application only when the user navigates to them, rather than shipping the entire app in the initial bundle. This shrinks the first download and speeds up initial render.
It is configured in the router using loadChildren (for a set of routes) or loadComponent (for a standalone component), both returning a dynamic import() that Angular's build tool splits into a separate chunk. The chunk is fetched on demand the first time its route is activated, then cached. Combined with route-level preloading strategies, lazy loading reduces Time to Interactive and keeps the main bundle small even as the app grows.
- Smaller initial JavaScript bundle and faster first load
- Improved Time to Interactive and Core Web Vitals
- Code is downloaded only when actually needed
- Scales well as the app adds more features
- Can be paired with preloading for perceived instant navigation
AI Mentor Explanation
Lazy loading is like bringing in a specialist bowler only when the match situation demands it, rather than fielding the entire squad on the pitch at once. The player waits in the pavilion (unloaded) and is summoned exactly when that over needs their skill, keeping the active side lean.
Step-by-Step Explanation
Step 1
Identify a feature area
Group related routes or a heavy standalone component that not every user needs on first load.
Step 2
Use loadChildren or loadComponent
In the route config, replace an eager component with loadComponent: () => import('./x').then(m => m.X) or loadChildren for a route set.
Step 3
Let the build split chunks
Angular's bundler automatically emits a separate JavaScript chunk per dynamic import boundary.
Step 4
Fetch on navigation
The chunk downloads the first time the route activates, then is cached for subsequent visits.
Step 5
Add a preloading strategy
Optionally use PreloadAllModules or a custom strategy so likely-next routes load in the background after initial render.
What Interviewer Expects
- Understanding that lazy loading reduces initial bundle size
- Knowledge of loadChildren and loadComponent syntax
- Awareness that dynamic import() drives code splitting
- Explanation of preloading strategies to hide fetch latency
- Connection to metrics like Time to Interactive and LCP
Common Mistakes
- Lazy loading a component that is needed on the very first route anyway
- Forgetting that shared services in a lazy chunk may create separate instances if not provided in root
- Ignoring preloading, causing a visible delay on first navigation
- Assuming lazy loading reduces total code size rather than just initial download
- Importing the lazy module eagerly elsewhere, defeating the split
Best Answer (HR Friendly)
“Lazy loading means an Angular app only downloads the part of the app a user actually visits, instead of everything at once. This makes the first page load much faster, especially on slower connections, because heavy sections are fetched only when needed.”
Code Example
import { Routes } from '@angular/router';
export const routes: Routes = [
{ path: '', component: HomeComponent },
{
// Lazy-load a single standalone component
path: 'profile',
loadComponent: () =>
import('./profile/profile.component').then(m => m.ProfileComponent),
},
{
// Lazy-load a whole feature's routes
path: 'admin',
loadChildren: () =>
import('./admin/admin.routes').then(m => m.ADMIN_ROUTES),
},
];Follow-up Questions
- What is the difference between loadChildren and loadComponent?
- How do preloading strategies complement lazy loading?
- How does lazy loading affect where you should provide shared services?
- How can you measure the bundle-size impact of lazy loading?
- Can lazy loading hurt UX, and how do you mitigate first-navigation delay?
MCQ Practice
1. Which router property lazy-loads a single standalone component?
loadComponent takes a dynamic import returning a standalone component, loading it only when the route activates.
2. What primarily enables Angular to split lazy chunks?
Each dynamic import() is a code-splitting boundary the bundler turns into a separate chunk fetched on demand.
3. What is the main first-load benefit of lazy loading?
By deferring feature code, the initial download shrinks, improving first load and Time to Interactive.
Flash Cards
What does lazy loading defer? — Downloading a feature's code until the user navigates to its route.
Which APIs configure it? — loadChildren (route set) and loadComponent (standalone component), both using dynamic import().
How do you hide first-navigation delay? — Use a preloading strategy like PreloadAllModules to fetch likely routes in the background.
Does lazy loading reduce total code size? — No — it reduces the initial download; total code is the same but split across on-demand chunks.