mediumFrontend

What is a route resolver and when is it useful?

Q: What is a route resolver and when is it useful?

**Core concept.** A resolver **pre-fetches data before a route activates**, so the component renders with its data already available — no empty/loading flash on entry. You write a ResolveFn that returns the data (often an Observable), attach it to the route's resolve , and read it from ActivatedRoute.data . navigate to /user/1 <rect class='d-box-accent' x='176' y='52' width='110' height='46' rx='1

1.2k views

Understand the problem

Explain resolvers.

resolverdata

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A functional resolver

import { ResolveFn, ActivatedRouteSnapshot } from '@angular/router';

export const userResolver: ResolveFn<any> = (route: ActivatedRouteSnapshot) =>
  fetch('/users/' + route.paramMap.get('id')).then(r => r.json());

// route config:
//   { path: 'user/:id', component: UserComponent, resolve: { user: userResolver } }

// in the component:
//   const user = this.route.snapshot.data['user'];  // already loaded

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the difference between @ViewChildren and @ViewChild?

Explain how to perform unit testing on components with Signals using TestBed.