What is Lazy Loading in Angular
💡 Concept Name
Lazy Loading – A performance optimization technique in Angular that loads feature modules only when they are needed instead of during the initial application load.
📘 Quick Intro
Lazy loading splits the Angular app into multiple bundles. These bundles are loaded on demand when the user navigates to a specific route, reducing the initial bundle size and improving loading speed.
🧠 Analogy / Short Story
Imagine a book with many chapters, but you only read the chapters you’re interested in. Angular lazy loading only “opens” (loads) modules when you choose to “read” (navigate to) them.
🔧 Technical Explanation
- 📦 Feature Modules: Are split into separate files using the Angular router.
- 🧠 Route-based Loading: Routes are configured with
loadChildrento load modules dynamically. - 🚀 Improved Performance: Faster initial load time, especially in large applications.
- 🎯 Angular CLI Support: Automatically handles code-splitting and module bundling.
- 🔁 CanCombine With Guards: Often used with
CanLoadto prevent unauthorized module loading.
🎯 Purpose & Use Case
- ✅ Used for large apps with many features or sections.
- ✅ Optimizes mobile performance by avoiding unnecessary bundle downloads.
- ✅ Keeps core bundle size small, improving time to interactive.
💻 Real Code Example
// app-routing.module.ts
const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
}
];
❓ Interview Q&A
Q1: What is lazy loading in Angular?
A: A technique that loads modules only when they are required, reducing initial load time.
Q2: Which Angular feature enables lazy loading?
A: The loadChildren property in the routing configuration.
Q3: What are the benefits of lazy loading?
A: Faster initial load, better performance, and efficient resource usage.
Q4: What happens if a user never visits a lazy-loaded route?
A: That module is never downloaded, saving bandwidth.
Q5: Can guards be used with lazy loading?
A: Yes, especially CanLoad to restrict access before loading.
📝 MCQs
Q1. What is lazy loading?
- Loading all modules upfront
- Delaying service calls
- Loading modules on demand
- Preloading assets
Q2. Which Angular property enables lazy loading?
- path
- component
- loadChildren
- redirectTo
Q3. Why use lazy loading?
- Reduce file size
- Improve performance
- Add animations
- Enable forms
Q4. When does Angular load a lazy module?
- During app start
- After login
- On user interaction
- When its route is visited
Q5. What happens if a lazy route is never visited?
- It fails
- It is preloaded
- It is never loaded
- It slows app
Q6. Which guard is best with lazy modules?
- CanActivate
- CanDeactivate
- CanLoad
- CanChild
Q7. Can you lazy load multiple modules?
- No
- Only one
- Yes
- Only root module
Q8. Which file defines lazy-loaded routes?
- Main.ts
- AppComponent
- Routing module
- Environment.ts
Q9. Is lazy loading helpful for mobile apps?
- No
- Yes
- Only for desktop
- Rarely
Q10. What does lazy loading reduce?
- App logic
- Routing complexity
- Initial bundle size
- Code quality
💡 Bonus Insight
You can combine lazy loading with Angular preloading strategies to preload certain modules in the background after the app loads. This provides both speed and seamless user experience.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!