Skip to content
OBLAIDISH NEWS
Angular 19 loadComponent vs loadChildren: choosing the right lazy‑loading boundary
TX_250496Engineering

Angular 19 loadComponent vs loadChildren: choosing the right lazy‑loading boundary

Angular 19 makes standalone components the default and promotes loadComponent as the primary lazy‑loading API. Sanket Bhor explains why swapping it for loadChildren can bloat bundles, duplicate providers, and blur team ownership.

Angular 19 shipped on May 28, 2026 as version 19.0.0, turning standalone components into the default project scaffold and exposing loadComponent as the primary lazy‑loading entry point for new apps [AngularRelease][AngularDocs].

What shipped

The router now ships with two lazy‑loading helpers:

  • loadComponent – dynamically imports a single standalone component when its route activates.
  • loadChildren – dynamically imports a child‑route configuration file that can contain many routes, providers, guards, and sub‑navigation.

Both rely on native import() but differ in the scope of the lazy‑loading boundary. The official docs list the signatures without prescribing architectural intent [AngularDocs].

Why it matters

  • Bundle granularityloadComponent creates a chunk that contains only the component and its direct dependencies. On a large enterprise app, a feature chunk generated by loadChildren can be 2–5 MB, while a single‑screen chunk stays under 200 KB. Mis‑scoping a feature as a flat list of loadComponent routes inflates the number of network requests without a measurable performance gain.
  • Provider and guard scoping – When a feature shares services (e.g., AdminUserService) and guards (AdminGuard), loadChildren lets you declare them once at the feature level. Replacing the feature with multiple sibling loadComponent routes forces you to repeat the same provider array on each route or hoist the services to the root injector, which defeats lazy instantiation and can cause memory leaks.
  • Team ownership – A hierarchical route file mirrors domain boundaries owned by a team. In a monorepo, admin/admin.routes.ts maps directly to the admin library, simplifying code reviews and onboarding. Flattening the structure into root‑level loadComponent entries obscures ownership, leading to the two‑sprint refactors Bhor observed in real PRs [DevTo].
  • Preloading interaction – With PreloadAllModules or QuicklinkStrategy, large feature chunks are fetched in the background, reducing perceived load time. A proliferation of tiny loadComponent chunks can trigger many parallel requests, saturating the browser’s connection pool and degrading performance on low‑end devices.

Editor's take

Treating loadComponent as a drop‑in replacement for loadChildren works only for truly isolated pages. In medium‑to‑large codebases the hidden cost is higher maintenance overhead and weaker encapsulation of feature boundaries. The pragmatic rule: if a route groups multiple screens, shared services, or guards, keep it under loadChildren; otherwise, reach for loadComponent.


Reader poll

Which lazy‑loading strategy do you adopt for feature domains?

  • loadChildren (feature modules)
  • loadComponent (single screens)
  • Both, depending on context
  • I avoid lazy loading altogether
operator_channel
[ comments_offline · provider_not_configured ]
transmission_log

Subscribe to the broadcast.

Daily digest of the day's most important tech news. No fluff. Engineering signal only.

// delivered via substack · double-opt-in confirmation