mcpField
A
angular-resolvers

angular-resolvers

github.com/oguzhan18Development7179 installsUpdated 31w ago
Repository

About angular-resolvers

A reference skill for Angular developers loading data during route navigation. It shows how to define functional resolvers, attach them to routes, access resolved data and handle errors.

Key features

  1. 01Functional route resolvers
  2. 02Attach resolvers to routes
  3. 03Read resolved data in components
  4. 04Handle resolver errors
  5. 05Configure multiple resolvers

Use cases

  1. 01Load user data before displaying a route
  2. 02Provide route components with resolved data
  3. 03Return a fallback value when loading fails

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-resolvers

After installing, type/angular-resolversin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

Details

From the project README

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))
  );
};
  • Use multiple resolvers
const routes: Routes = [
  {
    path: 'dashboard',
    resolve: {
      user: userResolver,
      settings: settingsResolver
    },
    component: DashboardComponent
  }
];

Comments

Markdown supported