Lazy Loading Modules
Improve app performance with lazy-loaded modules.
Lazy Loading Modules is a free Angular Academy lesson on CoddyKit. This is lesson 3 of 3. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 3 lessons in total.
Loading Modules on Demand
Lazy Loading Modules
Lazy loading improves performance by loading modules only when they're needed. Let's explore this important Angular feature.
What is Lazy Loading?
Lazy loading is loading modules asynchronously when a user navigates to a particular route, instead of loading all modules at app startup.
Why Use Lazy Loading?
- Reduces initial loading time
- Improves performance
- Optimizes resource usage
Creating a Lazy Loaded Module
Create a feature module to lazy load with Angular CLI:
ng generate module admin --route admin --module app.moduleConfiguring Lazy Routes
Set up lazy loading in your routing module:
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }Testing Lazy Loading
Use developer tools to confirm modules load only when routes are activated. You’ll see new JS files being loaded dynamically.
Preloading Strategies
Angular allows preloading of lazy-loaded modules to improve navigation speed further. Common strategies are:
- No preloading (default)
- Preload all modules
Lazy Loading Best Practices
Use lazy loading for modules not required immediately on application startup, like admin dashboards or settings pages.
Summary
You've successfully learned how to implement lazy loading to enhance your Angular application's performance. Great job!
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 38
- Lessons
- 144
Frequently Asked Questions
Is the “Lazy Loading Modules” lesson free?
Yes — any 3 lessons of the Angular Academy learning path, including “Lazy Loading Modules”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 3 lessons in total.
What will I learn in “Lazy Loading Modules”?
Improve app performance with lazy-loaded modules. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 3.
How long does the “Lazy Loading Modules” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Configuring Routes
- Route Guards
- Lazy Loading Modules