Angular Resolvers

This walks you through Angular's functional resolver pattern for pre-fetching data before route activation, which is the modern approach as of Angular 21. You get the ResolveFn syntax with inject() for services, handling route params, error catching with RxJS, and how to consume resolved data in components using both snapshot access and the newer input binding approach. The multiple resolver example is solid for real-world dashboards where you need several data sources ready before render. If you're still using class-based resolvers or loading data in ngOnInit, this shows the cleaner current style that reduces loading flicker and simplifies component logic.

skills.sh installs: 179
GitHub stars: 7
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add oguzhan18/angular-ecosystem-skills --skill angular-resolvers --agent claude-code

Installs into .claude/skills of the current project.

Files

Angular Route Resolvers

Version: Angular 21 (2025) Tags: Resolvers, Routing, Data Loading

References: Resolvers Guide

Best Practices

Create functional resolver

export const userResolver: ResolveFn<User> = (route, state) => {
  const userService = inject(UserService);
  const userId = route.paramMap.get('id');
  return userService.getUser(userId!);
};

Use resolver in route

const routes: Routes = [
  {
    path: 'user/:id',
    resolve: { user: userResolver },
    component: UserComponent
  }
];

Get resolved data in component

@Component({})
export class UserComponent {
  private route = inject(ActivatedRoute);
  
  user = this.route.snapshot.data['user'];
  
  // Or with input binding (Angular 17+)
  userId = input<string>();
}

Handle resolver errors

export const dataResolver: ResolveFn<Data> = (route, state) => {
  const service = inject(DataService);
  return service.getData().pipe(
    catchError(() => of(null))
  );
};