Sign in
Skip to solution
mediumFrontend

What is a route resolver and when is it useful?

1.2k views
01

Understand the problem

Explain resolvers.

resolverdata
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

A resolver fetches data before a route activates so the component renders with everything ready (no loading flash for critical data). Modern Angular uses functional resolvers; the resolved data is read from ActivatedRoute.data.

Solution ready — 2 min read

Classified // press E to declassify

04

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
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 15 of 121 decoded in the Angular track. One more won't hurt.

Back to track