Data Resolvers

Data resolvers fetch data before a route activates, ensuring components have the necessary data upon rendering.

Creating a Resolver

Implement the `ResolveFn` type.

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

Configuring the Route

Add the resolver under the `resolve` key.

{
  path: 'user/:id',
  component: UserProfile,
  resolve: {
    user: userResolver
  }
}

Accessing Resolved Data

1. Via `ActivatedRoute` (Traditional)

private route = inject(ActivatedRoute);
data = toSignal(this.route.data);
user = computed(() => this.data().user);

2. Via Component Inputs (Modern)

Enable `withComponentInputBinding()` in `provideRouter` to pass resolved data directly to `@Input` or `input()`.

// app.config.ts
provideRouter(routes, withComponentInputBinding());

// component.ts
user = input.required<User>();

Error Handling

Navigation is blocked if a resolver fails.

• Use `withNavigationErrorHandler` for global handling.
• Use `catchError` within the resolver to return a `RedirectCommand` or fallback data.

return userService
  .get(id)
  .pipe(catchError(() => of(new RedirectCommand(router.parseUrl('/error')))));

Best Practices

• **Keep it lightweight**: Fetch only critical data.
• **Provide feedback**: Listen to router events to show a global loading bar during navigation, as the UI stays on the old page until the resolver finishes.