Route Resolvers for Data Pre-fetching

Snippet

Route Resolvers for Data Pre-fetching

Resolvers allow you to fetch data before a route is activated. This prevents the component from loading in an incomplete state (e.g., without data) and improves the user experience by avoiding 'flickering' while waiting for async requests.

snippet.js
javascript
export const heroResolver: ResolveFn<Hero> = (
  route: ActivatedRouteSnapshot
) => {
  const id = route.paramMap.get('id')!;
  return inject(HeroService).getHero(id);
};
 
// In app.routes.ts
{ 
  path: 'hero/:id', 
  component: HeroComponent, 
  resolve: { hero: heroResolver } 
}

angular

Breakdown

export const heroResolver: ResolveFn<Hero>

Defines a functional resolver that returns an Observable, Promise, or literal value.

resolve: { hero: heroResolver }

Maps the resolver output to the 'hero' key in the route's data object.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Route Resolvers for Data Pre-fetching

Related