Use eager routes when a page should be available without a separate route-code fetch; use lazy routes to keep secondary feature code out of the initial JavaScript bundle. Preloading is a separate choice: it fetches selected lazy routes in the background after startup, trading bandwidth and memory for potentially faster first navigation. The right balance depends on which pages people visit, your app’s build output, and the devices and networks you support.
How the route-loading choices differ
Angular route loading determines when JavaScript for a route is downloaded. It is distinct from whether a page’s HTML is rendered in the browser, generated at build time, or rendered on a server.
As an Amazon Associate I earn from qualifying purchases.
| Choice | Initial transfer | First visit to the route | Background resource use | Good starting point |
|---|---|---|---|---|
Eager component (component) |
The route component is included with the route configuration bundle. | No separate route-code fetch is needed for that component. | Less deferred-fetch overhead. | Primary landing pages or small apps where immediate route availability matters. Angular’s route-loading guide presents this as general guidance, not a universal rule. |
Lazy component (loadComponent) |
The component code is deferred to a separate chunk. | A fetch may occur when the route becomes active. | The code is requested when the route is used, unless it is preloaded. | Secondary or infrequently used pages. Angular’s route-loading guide. |
Lazy child routes (loadChildren) |
Child route configuration is deferred. | The router loads it during route matching. | Useful for grouping feature routes; avoid unnecessary layers of deferral. | Feature areas with their own route configuration. Angular’s route-loading guide and Route API. |
| No preloading | Lazy chunks stay deferred until navigation. | The user may wait for the first route-code request. | Lowest background prefetch use. | The default policy, bandwidth-sensitive apps, or rarely used areas. Angular’s route behavior guide. |
| Preload all | Lazy modules begin loading after initial navigation. | Navigation can avoid waiting for a chunk if it has already loaded. | Uses bandwidth and memory and may compete with other work. | Smaller apps where fetching all lazy modules is acceptable. Angular’s route behavior guide. |
| Selective preloading | Only opted-in lazy routes are prefetched. | Can reduce the wait for routes chosen for preloading. | Balances background cost against likely future navigation. | Apps with known navigation patterns or route metadata. Angular’s route behavior guide. |
When should a route be eager or lazy?
Keep primary pages eager when immediate availability matters
An eager route uses the component property. Its referenced component is part of the route configuration bundle, so the browser downloads and parses that code up front. That adds to initial JavaScript, but avoids a separate route-code request when the component is first needed.
Defer secondary features with lazy loading
Use loadComponent for an individual component, or loadChildren for a child route configuration. Both take loader functions returning promises; dynamic import() is the common pattern and lets the build emit code in separate chunks. The route code is then fetched when needed, unless a preloading policy fetches it earlier. Lazy loading can reduce the initial transfer, but adds a request and possible delay on the first navigation to that route. Deeply nested lazy boundaries can add latency rather than improve the experience. See Angular’s route-loading guide and Route API.
#1 Best Overall
Use the route loader’s injection context carefully
Angular runs route loader functions in the route’s injection context. That allows inject to access providers available to the route and its parent hierarchy, for example when a feature flag selects an implementation. Keep the basic loading choice understandable: conditional loader logic should not obscure whether the route is eager or deferred. Details are in the Route API.
How to configure lazy routes
Use an eager route when its component belongs in the initial route configuration; replace that property with a loader when the code should be deferred. A standalone component can be loaded like this:
import { Routes } from '@angular/router';
export const routes: Routes = [
{
path: 'reports',
loadComponent: () =>
import('./reports/reports.component').then(m => m.ReportsComponent),
},
];For a feature that defines its own routes, use loadChildren instead:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
export const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.routes').then(m => m.ADMIN_ROUTES),
},
];These examples show the common dynamic-import pattern; adapt the module paths and exported names to your app. Angular’s route-loading guide describes both loader options.
Should you preload lazy routes?
Preloading can reduce first-navigation delay by fetching lazy code before a user opens that route. Angular’s default NoPreloading policy leaves lazy routes alone. PreloadAllModules starts loading lazy modules after initial navigation. Neither policy is automatically best: preloading consumes network bandwidth and memory, and background requests may compete with images, API calls, or other important resources. Consider route popularity, network conditions, and device constraints.
Preload every lazy module
Configure the router with withPreloading(PreloadAllModules) when fetching all lazy modules after startup is an acceptable trade-off:
Rank #3
import { provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
provideRouter(routes, withPreloading(PreloadAllModules));Angular documents this configuration in the route behavior guide and the withPreloading API.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, 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 minutePreload only routes you choose
A custom PreloadingStrategy can decide route by route whether to call the supplied loader. One simple pattern uses route metadata:
import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class SelectivePreloadingStrategy implements PreloadingStrategy {
preload(route: Route, load: () => Observable<unknown>): Observable<unknown> {
return route.data?.['preload'] ? load() : of(null);
}
}export const routes: Routes = [
{
path: 'reports',
data: { preload: true },
loadChildren: () => import('./reports/reports.routes').then(m => m.REPORTS_ROUTES),
},
];Register the strategy through withPreloading(SelectivePreloadingStrategy). This makes likely or important routes eligible while leaving others deferred. Angular documents the selective strategy pattern in its route behavior guide.
Account for router behavior and guards
The RouterPreloader API describes preloading as background work checked after navigation events. It also states that a route guarded by canLoad is not preloaded. Guard APIs and behavior can evolve, so confirm the effect of the guard used by your application against the Angular version you run.
How route loading relates to SSR and prerendering
CSR, SSG (also called prerendering), and SSR describe how HTML is produced; eager and lazy routes describe when JavaScript route code is delivered. They are related architectural decisions, not alternatives to one another.
- With CSR, the browser renders the application.
- With SSG or prerendering, HTML is generated at build time.
- With SSR, HTML is generated on the server for the initial request.
In the SSR and SSG setup described by Angular, after hydration, later route changes happen client-side. Choose a rendering mode based on needs such as initial content, interactivity, SEO, server requirements, and freshness. Choose route loading based on initial JavaScript size, first-navigation latency, network use, and memory. Angular explains the rendering modes in its rendering strategies guide.
How to validate your choice
Angular’s guidance is qualitative; it does not promise a particular percentage improvement or speedup. The outcome depends on your build output, which routes people use, their network conditions, and device performance. Measure in the application you ship rather than assuming a route-loading strategy has a universal effect.
- Inspect the built output to see whether deferred route code is emitted separately and how much code remains in the initial bundle.
- Test a cold first visit to a lazy route and a repeat visit after its code has loaded.
- Compare startup and route-navigation behavior with preloading off, on for all routes, and selectively enabled.
- Check whether background route requests contend with critical images, API work, or constrained devices and networks.
Migrating existing eager routes
Angular provides a migration schematic for eligible eager component routes: ng generate @angular/core:route-lazy-loading. Treat its output as a starting point, then inspect the changed route configuration and verify navigation behavior in your app. The schematic’s scope is described in Angular’s migration guide.
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.
Free tools Windows power users keep installed
One-click scans. No signup required.
