Use loadComponent to lazy-load a standalone routed component, or loadChildren to defer a route subtree. Angular’s router then requests the relevant code when needed, rather than including it in the initial route bundle. That can reduce initial JavaScript transfer, but it does not guarantee a faster app: a first visit to a lazy route may wait for another request. Angular generally recommends keeping primary landing pages eager and considering lazy loading for other pages.
How Angular lazy-loaded routes work
A route can refer to code directly or provide a loader function. With a lazy route, the loader commonly uses JavaScript’s dynamic import(). The build can place that code in a separate chunk, which the router requests when the route is visited. Lazy loading changes when code is transferred; it does not remove that code or promise a particular performance gain.
As an Amazon Associate I earn from qualifying purchases.
The tradeoff is between initial work and later navigation: less route code may be needed at startup, while a first visit to a deferred route may require a network request. Angular cautions that future requests can be undesirable, especially when an application has multiple nested lazy-loading levels. See Angular’s lazy-loaded routes performance guidance.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Choose between loadComponent and loadChildren
| Route property | Use it for | Typical loader |
|---|---|---|
loadComponent |
A standalone routed component | () => import('./reports/reports-page') |
loadChildren |
A child route configuration or a lazy NgModule | () => import('./admin/admin.routes') |
Use loadComponent when the destination is one standalone component. Use loadChildren when the route opens a subtree whose child routes should be loaded together, or when loading a lazy NgModule. Angular’s Route API and LoadChildrenCallback API describe the supported route loader types.
#1 Best Overall
Configure a lazy standalone component
In a route file that imports Routes, define the path and return the component from a dynamic import:
import { Routes } from '@angular/router';
export const routes: Routes = [
{
path: 'reports',
loadComponent: () => import('./reports/reports-page'),
},
];This direct form works when the imported module’s default export is the component. If it uses a named export, select that export from the import promise:
loadComponent: () =>
import('./reports/reports-page').then(m => m.ReportsPage)For a route subtree, point loadChildren at a file exporting a route array. A lazy NgModule is also supported:
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11{
path: 'admin',
loadChildren: () => import('./admin/admin.routes'),
}The Angular v20 route-definition guide shows lazy standalone components and nested-route configuration.
Rank #3
Decide which routes should be lazy
Do not add a lazy boundary to every route by default. Angular’s general guidance is to keep primary landing pages eager and consider lazy loading other pages. Apply that guidance to actual route roles and usage: code required by the first view may be worth having ready, while a less central or conditionally visited feature may be a better candidate for deferral.
- Initial transfer and parsing: eager route code is available with the initial application code; lazy route code is placed in chunks requested later.
- First visit: an eager destination is already available, while a lazy destination may wait for its chunk unless it has been preloaded or cached.
- Background resource use: preloading can move requests earlier, but consumes bandwidth and memory.
- Nested boundaries: multiple levels can add requests. Measure navigation in your application instead of assuming that more splits are faster.
The reviewed Angular guidance gives qualitative tradeoffs, not a universal route-count threshold, expected bundle reduction, or load-time percentage. Compare the initial chunks, likely visit patterns, and first-navigation timing in your own application.
Choose when lazy routes preload
Preloading is a separate router policy: it determines whether lazy code is fetched before a user first visits that route. Angular documents these built-in choices:
Free tools Windows power users keep installed
One-click scans. No signup required.
| Strategy | Behavior | Tradeoff |
|---|---|---|
NoPreloading |
The default; lazy modules load when a user navigates to them. | Does not spend bandwidth on a route before it is requested, but its first visit may wait for the chunk. |
PreloadAllModules |
Begins loading lazy modules after initial navigation. | Can make later visits ready sooner, while background downloads use bandwidth and memory. |
Custom PreloadingStrategy |
Loads routes selected by application logic, such as routes marked with data: { preload: true }. |
Can focus background work on selected routes; the application must define the selection behavior. |
Start with the default unless observed first visits show a reason to change it. If selected routes are both likely to be visited and costly to fetch at the moment of navigation, a selective strategy can preload them. Background requests may compete with images, API calls, or other critical resources, so consider that cost as well. Angular documents built-in and custom strategies in Customizing route behavior.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use dependencies inside a route loader
Angular runs route loader functions in the route’s injection context. A loader can call inject() for dependencies available on that route, inherited from a parent route, or provided globally. This supports context-aware choices, such as selecting between components based on an injected feature-flag service. It is an advanced option; a direct dynamic import is the ordinary pattern when the route always loads the same component.
Migrate eligible eager routes with the Angular CLI
Angular provides a schematic that converts eligible eagerly loaded standalone route components to loadComponent imports:
ng generate @angular/core:route-lazy-loadingTo limit the migration to a part of the application, pass a path:
ng generate @angular/core:route-lazy-loading --path src/app/featureThe schematic searches common route declarations, including RouterModule.forRoot, RouterModule.forChild, Router.resetConfig, provideRouter, and variables typed as Routes or Route[]. It only converts eligible standalone route components. For a route component declared in an NgModule, Angular’s route lazy-loading migration guide advises considering a move to standalone before running the migration again. Review the generated changes and test routing behavior through your normal project workflow; code transformation alone does not establish a performance improvement.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
