What is a resolver in Angular routing, and what problem does it solve?

A resolver fetches data before a route actually activates, ensuring the component already has the data it needs the moment it appears on screen, rather than showing an empty or loading state and then fetching the data afterward inside the component itself.

export const userResolver: ResolveFn<User> = (route) => {
  const userService = inject(UserService);
  return userService.getUser(route.params['id']);
};

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