Angular FAQ: Top Questions

A resolver is used to pre-fetch data before routing to a component. It ensures the component has required data before loading.

@Injectable({ providedIn: 'root' })
export class UserResolver implements Resolve<User> {
  constructor(private service: UserService) {}
  resolve(route: ActivatedRouteSnapshot): Observable<User> {
    return this.service.getUser(route.params['id']);
  }
}
        

Usage:

{ path: 'user/:id', component: UserComponent, resolve: { user: UserResolver } }