Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use loadComponent to defer a standalone routed component, or loadChildren to defer a route subtree or lazy NgModule. Both commonly use dynamic import() to put route code in separate chunks that the router requests when needed. That can reduce the JavaScript transferred initially, but may add a wait on the first visit to a lazy route. Angular generally recommends keeping primary landing pages eager and lazy-loading other pages where the tradeoff makes sense.
Choose between loadComponent and loadChildren
The key distinction is what the loader resolves: a single routed component or a set of child routes. Angular documents both patterns in its lazy-loading guide and route-definition guide.
| Route property | Use it for | Typical result |
|---|---|---|
loadComponent |
A standalone component used by a route | A component loaded when the route is activated |
loadChildren |
A route subtree or a lazy NgModule | Child route definitions or an NgModule loaded when needed |
Lazy-load one standalone component
For a standalone routed page, return a dynamic import from loadComponent:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
import { Routes } from '@angular/router';
export const routes: Routes = [
{
path: 'reports',
loadComponent: () => import('./reports/reports-page'),
},
];If the file exports the component by name rather than as its default export, select it from the import promise: loadComponent: () => import('./reports/reports-page').then(m => m.ReportsPage). A default export can be returned directly.
#1 Best Overall
Lazy-load a route subtree
Use loadChildren when a route owns child routes. Point it to a file exporting a Routes array, or to a lazy NgModule:
loadChildren: () => import('./admin/admin.routes')The router’s Route API and LoadChildrenCallback API describe the supported lazy-loader types.
What lazy loading changes—and what it does not
With eager route references, the associated route code is available as part of the application’s initial code. With lazy loading, the build can place that code in a separate JavaScript chunk, requested when the route is visited. The code is deferred, not removed.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC 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- Initial load: less route code may need to be transferred and parsed up front.
- First visit to a lazy route: navigation may wait for the chunk unless it has already been preloaded or cached.
- Bandwidth and memory: deferred routes avoid requests until needed; preloading starts requests earlier and uses resources in the background.
- More boundaries: nested lazy routes can add requests and may make navigation slower rather than faster.
Angular’s performance guidance recommends eager loading for primary landing pages and lazy loading other pages. It also cautions that deferred loading adds future data requests that may be undesirable. The official guidance reviewed here does not establish a universal bundle-size reduction, load-time gain, or route-count threshold; judge the effect in the application rather than assuming every split improves performance.
Rank #3
Decide which routes should be lazy
Base the decision on a route’s role and how likely it is to be visited, not on a rule that every route must be lazy. A frequently used landing page is a strong candidate to keep eager. A less central or conditionally visited feature may be a better candidate for deferred code.
- Compare initial transfer and parsing work with the first-navigation delay for the route.
- Consider whether nested lazy boundaries create extra requests along a common navigation path.
- Inspect actual route visits, generated chunk sizes, and navigation timing in your application.
Dynamic imports split code; they do not guarantee a specific performance improvement. Avoid adding lazy boundaries mechanically when their later requests would make common navigation worse.
Choose a preloading strategy separately
Lazy loading determines when route code becomes eligible to load; preloading determines whether the router fetches lazy code in the background before the user visits that route. Angular documents the built-in and custom options in Customizing route behavior.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →| Strategy | Behavior | Tradeoff |
|---|---|---|
NoPreloading (default) |
Waits until navigation to load lazy modules | Preserves background bandwidth, but the first visit may wait for the route code |
PreloadAllModules |
Starts loading lazy modules after initial navigation | Can reduce first-visit delay, but consumes bandwidth and memory in the background |
Custom PreloadingStrategy |
Loads selected routes, for example routes marked with data: { preload: true } |
Offers selective control; the application must define the policy |
Start with the default unless route behavior gives you a reason to preload. If important routes have an unacceptable first-visit delay, consider selectively preloading routes likely to be used. Background downloads can compete with images, API calls, and other resources, so weigh that cost against the navigation benefit.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use inject() in a lazy loader when routing depends on a service
Angular runs lazy loader functions in the route’s injection context. A loader can call inject() for dependencies provided globally or available on that route or an inherited parent route. For example, a feature-flag service can select between dashboard components. This is useful for context-dependent routing; for ordinary lazy loading, a direct dynamic import is simpler.
Convert eligible routes with Angular’s migration schematic
Angular provides a schematic to convert eligible eagerly loaded standalone route components to loadComponent imports. The migration guide documents its supported route declarations and standalone constraint: Lazy-loaded routes migration.
- Run
ng generate @angular/core:route-lazy-loadingfrom the Angular project. - To limit the migration to a directory, add a path, for example
--path src/app/feature. - Review the generated changes and verify the application’s routing behavior in your normal project workflow.
The schematic searches common declarations, including RouterModule.forRoot/forChild, Router.resetConfig, provideRouter, and variables typed as Routes or Route[]. It converts eligible standalone route components. If a route component is declared in an NgModule, Angular’s guide says to consider making it standalone and running the migration again. A successful code transformation is not evidence by itself that the application’s performance improved.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesQuick 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.
