⚡Angular v22.2 ArchitectureRouter Resources

Signal-Driven Route Resources

Experience Angular 22.2 parallel, non-blocking data fetching. Eliminate resolver waterfalls, bind route data directly into component inputs, and reactively reload when params change without destroying route components.

⚠️

Traditional Resolvers (v2 - v21)

Sequential waterfall execution blocks navigation until complete.
Static snapshot data with no native signals (isLoading, error).
Requires full route transition or runGuardsAndResolvers to re-run.
Component can render only after the slowest resolver finishes.

🚀

Angular 22.2 Router Resources

Parallel non-blocking execution via withRouterResources().
Full Signals reactivity with .isLoading(), .status(), and .value().
Auto-bound directly to component input() signals via outlet effects.
In-place .reload() and param sensitivity without route unmount.

Interactive Resource Simulator

Simulate route parameter changes and inspect signal-driven reactivity.

Package (Route Param)

Version (Signal Dependency)

Simulated Latency300ms

resource.status()

resolved

resource.isLoading()

false

Payload Items

1 loaded

Simulated Route Component View

BROWSER-WEB-APISFeature Library

Loaded at: 11:58:12 AM

Package ID@angular-helpers/browser-web-apis

Target Versionv22

Estimated Size14.8 kB

SSR HydrationZoneless Safe

Implementation in angular-helpers

// app.config.ts
provideRouter(routes, withComponentInputBinding(), withRouterResources())

// docs.routes.ts
{
  path: ':service',
  loadComponent: () => import('./detail.component'),
  resources: (ctx) => ({
    config: serviceDetailResource(ctx, 'browser-web-apis')
  })
}