What are Angular resolvers?

Resolvers are route lifecycle hooks that pre-fetch data before a route is activated — the component only renders after the data is available. This avoids the pattern of showing a component with empty data then loading. Traditional class resolver: @Injectable({ providedIn: "root" }) export class UserResolver implements Resolve<User> { constructor(private userService: UserService) {} resolve(route: ActivatedRouteSnapshot): Observable<User> { return this.userService.getUser(route.params["id"]); } }. Register in routes: { path: "users/:id", component: UserDetailComponent, resolve: { user: UserResolver } }. Access resolved data in component: constructor(private route: ActivatedRoute) {} ngOnInit() { this.user = this.route.snapshot.data["user"]; // or Observable: this.route.data.subscribe(data => this.user = data["user"]); }. Functional resolver (Angular 14+): simpler approach without class: export const userResolver: ResolveFn<User> = (route, state) => { return inject(UserService).getUser(route.params["id"]); };. Error handling in resolvers: if the Observable errors, navigation is cancelled. Use catchError to redirect or provide default data. Pros: data available immediately in ngOnInit, no loading state needed in component template. Cons: navigation appears "stuck" while resolving — adds perceived latency. For better UX with longer loads, show a progress indicator and let the component handle loading state itself.