intermediate

Routing

Design route trees with lazy loading, guards, resolvers, params, nested outlets, and preloading strategy trade-offs.

Angular Router maps URL configs to components with `RouterModule` or standalone `provideRouter`. Lazy `loadComponent` / `loadChildren` splits bundles. Guards (`canActivate`, `canMatch`) protect routes; resolvers prefetch data before activation.

					{
  path: 'admin',
  canActivate: [authGuard],
  loadChildren: () => import('./admin/routes').then((m) => m.ADMIN_ROUTES),
}

Nested `router-outlet` builds master-detail layouts. Preloading strategies balance initial load versus later navigation latency.

On interviews: guard versus resolver responsibilities, paramMap Observables, and secondary outlets for modals.

Common pitfalls: heavy resolver blocking navigation, guards with side effects that belong in services, and reloading parent routes unnecessarily.

The trade-off is rich navigation features (guards, resolvers, lazy routes) versus configuration and preload tuning cost.

Checklist:

Lazy-load feature areas.
Guards for auth; resolvers for required data.
Subscribe paramMap with switchMap.
Preloading strategy matches UX goals.