Resolver for pre-fetching data in Angular

Introduction

A Resolver in Angular helps get data before showing a page. This means the page waits until the data is ready, so users see everything at once without waiting.

When you want to load user details before showing the profile page.

When a list of items must be ready before displaying a page.

When you want to avoid showing empty content while data loads.

When you want to handle errors before the page appears.

When you want smoother navigation with all data ready upfront.

Syntax

Angular

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataResolver implements Resolve<DataType> {
  constructor(private service: DataService) {}

  resolve(): Observable<DataType> {
    return this.service.getData();
  }
}

The resolver class implements the Resolve interface.

The resolve method returns an Observable with the data to fetch.

Examples

This resolver fetches user data before the route loads.

Angular

import { Resolve } from '@angular/router';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class UserResolver implements Resolve<User> {
  constructor(private userService: UserService) {}

  resolve() {
    return this.userService.getUser();
  }
}

This resolver fetches a list of products before showing the page.

Angular

import { Resolve } from '@angular/router';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ProductResolver implements Resolve<Product[]> {
  constructor(private productService: ProductService) {}

  resolve() {
    return this.productService.getProducts();
  }
}

Sample Program

This example shows a resolver fetching user data before the UserComponent loads. The component then displays the user info immediately.

Angular

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable, of } from 'rxjs';

interface User {
  id: number;
  name: string;
}

@Injectable({ providedIn: 'root' })
export class UserResolver implements Resolve<User> {
  resolve(): Observable<User> {
    // Simulate fetching user data
    return of({ id: 1, name: 'Alice' });
  }
}

// In routing module
import { Routes } from '@angular/router';
import { UserComponent } from './user.component';
import { UserResolver } from './user.resolver';

export const routes: Routes = [
  {
    path: 'user',
    component: UserComponent,
    resolve: { userData: UserResolver }
  }
];

// In UserComponent
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  template: `<h1>User Info</h1><p>ID: {{user?.id}}</p><p>Name: {{user?.name}}</p>`
})
export class UserComponent {
  user?: User;

  constructor(private route: ActivatedRoute) {
    this.user = this.route.snapshot.data['userData'];
  }
}

Important Notes

Resolvers help avoid showing empty pages while waiting for data.

If the resolver fails, you can handle errors before the page loads.

Resolvers work well with Angular's routing system to improve user experience.

Summary

Resolvers fetch data before a route loads to show complete pages.

They return Observables or Promises with the needed data.

Use resolvers to improve user experience by avoiding loading delays on pages.