Angular Academy · Lesson

Resolvers and Route Data

Preload data before activating a route.

Lesson 2 of 413 steps

Resolvers and Route Data is a free Angular Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Resolvers and Route Data” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Resolvers and Route Data”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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