# Angular Resolvers

> ALWAYS use when working with Angular Route Resolvers, data pre-fetching, or loading data before route activation.

- Skill: `oguzhan18/angular-resolvers` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add oguzhan18/angular-resolvers`
- Raw SKILL.md: https://api.skillmd.com/api/skills/oguzhan18/angular-resolvers/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: oguzhan18 (https://skillmd.com/u/oguzhan18)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/oguzhan18/angular-resolvers

---


# Angular Route Resolvers

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

**References:** [Resolvers Guide](https://angular.dev/guide/routing/router-tutorial#pre-fetching-data-with-a-resolver)

## Best Practices

- Create functional resolver

```ts
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

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

- Get resolved data in component

```ts
@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

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

- Use multiple resolvers

```ts
const routes: Routes = [
  {
    path: 'dashboard',
    resolve: {
      user: userResolver,
      settings: settingsResolver
    },
    component: DashboardComponent
  }
];
```