Angular Academy · Lesson

Resolvers and Route Data

Preload data before activating a route.

Resolvers and Route Data is a free Angular Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is a resolver

A resolver pre-fetches data before a route activates, so the component renders with data already available — no loading flash in the component itself.

Static route data

The data property attaches static values to a route, readable via ActivatedRoute.data.

export const routes = [
  { path: 'admin', component: AdminComponent,
    data: { title: 'Admin Panel', roles: ['admin'] } }
];

Reading route data

route.data is an observable of the merged data object.

route.data.subscribe(d => {
  console.log(d['title']); // Admin Panel
});

Functional resolver: ResolveFn

Modern Angular uses ResolveFn — a plain function that returns the data (or an observable/promise of it).

import { ResolveFn } from '@angular/router';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export const userResolver = (route) => {
  const http = inject(HttpClient);
  return http.get('/api/user/' + route.paramMap.get('id'));
};

Wiring the resolver to a route

Attach resolvers under the resolve key. The result lands in route.data under that key.

export const routes = [
  { path: 'user/:id', component: UserComponent,
    resolve: { user: userResolver } }
];

Consuming resolved data

Read the resolved value from route.data by its key.

route.data.subscribe(d => {
  this.user = d['user']; // already loaded
});

Resolved data via input binding

With withComponentInputBinding(), resolved keys bind to matching component inputs automatically.

export class UserComponent {
  @Input() user!: User; // from resolve: { user: ... }
}

Resolvers and navigation timing

The router waits for the resolver observable to complete (or the promise to settle) before activating the route. A resolver that never completes blocks navigation.

Handling resolver errors

If a resolver errors, navigation is cancelled. Catch errors inside the resolver to redirect or return a fallback.

export const userResolver = (route) => {
  const http = inject(HttpClient);
  const router = inject(Router);
  return http.get('/api/user/' + route.paramMap.get('id')).pipe(
    catchError(() => { router.navigate(['/404']); return EMPTY; })
  );
};

When to use resolvers

Use resolvers for data that must be present before the page shows. For data that can load progressively, fetching in the component (with a loading state) is often a better UX. Do not block navigation on slow optional data.

Title strategy

The router has a built-in title route property and TitleStrategy for setting the document title, often paired with resolved data.

export const routes = [
  { path: 'about', component: AboutComponent, title: 'About Us' }
];

Quick Check

Test your understanding of resolvers.

Recap: Resolvers & Route Data

Resolvers pre-load data before activation.

data: static route values.
ResolveFn + resolve: dynamic pre-fetch into route.data.
Router waits for completion; handle errors to avoid blocked navigation.

Next: functional route guards.

Frequently asked questions

Is the “Resolvers and Route Data” lesson free?

Yes — the full text of “Resolvers and Route Data” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Resolvers and Route Data”?

Preload data before activating a route. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Resolvers and Route Data” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy