ResolveFn

Function type definition for a data provider.

A data provider can be used with the router to resolve data during navigation. The router waits for the data to be resolved before the route is finally activated.

A resolver can also redirect a RedirectCommand and the Angular router will use it to redirect the current navigation to the new destination.

The following example implements a function that retrieves the data needed to activate the requested route.

interface Hero {
  name: string;
}
@Injectable()
export class HeroService {
  getHero(id: string) {
    return {name: `Superman-${id}`};
  }
}

export const heroResolver: ResolveFn<Hero> = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot,
) => {
  return inject(HeroService).getHero(route.paramMap.get('id')!);
};

bootstrapApplication(App, {
  providers: [
    provideRouter([
      {
        path: 'detail/:id',
        component: HeroDetailComponent,
        resolve: {hero: heroResolver},
      },
    ]),
  ],
});

And you can access to your resolved data from HeroComponent:

@Component({template: ''})
export class HeroDetailComponent {
  private activatedRoute = inject(ActivatedRoute);

  ngOnInit() {
    this.activatedRoute.data.subscribe(({hero}) => {
      // do something with your resolved data ...
    });
  }
}

If resolved data cannot be retrieved, you may want to redirect the user to a new page instead:

export const heroResolver: ResolveFn<Hero> = async (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot,
) => {
  const router = inject(Router);
  const heroService = inject(HeroService);
  try {
    return await heroService.getHero(route.paramMap.get('id')!);
  } catch {
    return new RedirectCommand(router.parseUrl('/404'));
  }
};

When both guard and resolvers are specified, the resolvers are not executed until all guards have run and succeeded. For example, consider the following route configuration:

{
 path: 'base'
 canActivate: [baseGuard],
 resolve: {data: baseDataResolver}
 children: [
  {
    path: 'child',
    canActivate: [childGuard],
    component: ChildComponent,
    resolve: {childData: childDataResolver}
   }
 ]
}

The order of execution is: baseGuard, childGuard, baseDataResolver, childDataResolver.