---
title: "Routing, lazy loading, guards, and route data"
chapter: "06"
---

# 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.

```ts
{
  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.