Angular Lazy Loading: Ship Less Code Upfront
Think of your app as an encyclopedia. Lazy loading only fetches the volume (feature module) you need, when you need it, instead of loading the whole set upfront. Use it for distinct sections like dashboards.
Why it exists
By default, Single-Page Applications (SPAs) bundle all their code into a single large file. As an app grows, this initial download becomes a bottleneck, leading to slow load times and a poor user experience. Lazy loading was created to solve this by splitting the application into smaller chunks that are loaded only when needed.
The mental model
An Angular app is like a multi-volume encyclopedia. By default, Angular makes you carry all 26 volumes (the entire app bundle) just to look up one entry. Lazy loading lets you start with just the index and cover (the core app), and you only grab Volume 'S' (the Settings module) when the user navigates to the settings page. This dramatically reduces the initial weight and load time.
How it works
You organize related components, directives, and pipes into a distinct feature module. Then, in your main routing configuration, instead of directly importing a component for a route, you use the loadChildren property. This property uses a dynamic import() function to point to the module's file path. When a user navigates to that route, the Angular router fetches the required JavaScript chunk from the server, integrates it into the application, and then renders the view.
When to use it
Apply lazy loading to any feature area that isn't required for the initial, visible part of your application. Prime candidates include user profiles, settings pages, admin dashboards, and any complex workflow that lives behind a user click. If a user has to navigate to get there, it can probably be lazy-loaded.
When not to use it
Avoid lazy loading core, universally needed parts of the application shell, such as the main navigation bar, footer, or essential services. For very small applications with only a few pages, the complexity of setting up lazy loading may outweigh the performance benefits.
One canonical example
In an e-commerce app, the main routes for browsing products are loaded eagerly. The admin section, however, is lazy-loaded. The route configuration would look like this: { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }. A regular customer never downloads the code for the admin panel, but when an administrator navigates to /admin, Angular fetches and loads the AdminModule on demand.
Interview question
Which application section is the most appropriate candidate for Angular lazy loading?
- a.A small, simple application with only three distinct routes.
- b.An administrative panel accessible only after user login and specific role verification.Correct
- c.Essential, globally available services like an authentication or logging service.
- d.The main navigation bar and application footer, visible on every page.
Why? this is the answer
Lazy loading is best suited for distinct feature areas not required for the initial application load, such as an admin dashboard that users navigate to. Core application parts, universally needed services, or very small applications are generally not good candidates for lazy loading due to their constant need or the overhead outweighing benefits.
Just read this? Test yourself on what you have been reading.
Read the original → v18.angular.dev
- #angular
- #performance
- #lazy-loading
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on angular — each one lists the topics its interview covers.
See open roles