Routing, lazy loading, guards, and route data

The router is an application composition and navigation system.

Route design

Prefer routes aligned to user capabilities and ownership boundaries. Lazy-load feature components or route arrays.

{
  path: 'orders',
  loadComponent: () => import('./orders/orders.page')
    .then(m => m.OrdersPage),
  providers: [OrdersStore],
}

Route-scoped providers isolate feature state and clean it up when the route leaves.

Parameters and data

Read route parameters as reactive state where practical. Validate and map URL strings into domain types. Resolvers can fetch critical navigation data, but they delay route completion; use page-level loading when progressive display is better.

Guards

Client guards improve navigation, not backend security. The server must enforce authorization. Return a UrlTree or redirect command rather than navigating as a side effect.

Nested layouts

Use parent routes for shared shells, context, and providers. Keep route configuration readable; giant nested arrays conceal product structure.

Preloading and view transitions

Preload based on likely navigation and network cost. View transitions can improve continuity but require reduced-motion handling and stable semantics.

Error and not-found routes

Make denied, missing, offline, and unexpected error states distinct. Preserve useful attempted destinations after authentication where safe.

Feynman check

A route is a URL contract plus code boundary, provider scope, and navigation policy. Explain what should happen when a deep link loads directly after a browser refresh.