`resolve`

Pre-fetches data before a route activates via a resolver function.

Since Angular 14.2+ Spec ↗

Syntax

resolve: { key: ResolveFn<T> }

Parameters

Name	Type	Required	Description
`resolver`	`ResolveFn`	No	Function returning the data (sync or async) for the route.

Returns

any — Resolved data exposed on the route data.

Examples

import { inject } from '@angular/core';
import { ResolveFn, ActivatedRouteSnapshot } from '@angular/router';
import { UserService } from './user.service';

export const userResolver: ResolveFn<User> = (route: ActivatedRouteSnapshot) =>
  inject(UserService).getById(route.paramMap.get('id')!);

// route: { path: 'users/:id', component: UserComponent,
//          resolve: { user: userResolver } }

Notes

Functional resolvers (ResolveFn) run in an injection context and may return a value, Promise, or Observable. The router waits for it before activating the route; access the value via ActivatedRoute data or a bound input with withComponentInputBinding.