What is Resolve Guard in Angular: Explanation and Example

In Angular, a Resolve Guard is a special service that fetches data before a route is activated. It ensures the component has the required data ready, improving user experience by avoiding empty or loading states.

How It Works

A Resolve Guard acts like a helpful assistant who fetches important information before you enter a new room. Imagine you want to watch a movie, but you want the popcorn ready before you sit down. The resolve guard fetches the popcorn first, so you don’t have to wait once you’re seated.

In Angular, when you navigate to a route, the resolve guard runs first. It asks a service to get the data needed for that page. Only after the data arrives does Angular activate the route and show the component. This way, the component starts with all the data it needs, avoiding empty screens or extra loading spinners.

Example

This example shows a resolve guard that fetches user data before loading the user profile page.

typescript

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

@Injectable({ providedIn: 'root' })
export class UserResolver implements Resolve<string> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> {
    // Simulate fetching user data with a delay
    return of('User Data Loaded').pipe(delay(1000));
  }
}

// In your routing module
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserProfileComponent } from './user-profile.component';

const routes: Routes = [
  {
    path: 'user-profile',
    component: UserProfileComponent,
    resolve: { userData: UserResolver }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

// In UserProfileComponent
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user-profile',
  template: '<p>{{ userData }}</p>'
})
export class UserProfileComponent implements OnInit {
  userData: string | undefined;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.userData = this.route.snapshot.data['userData'];
  }
}

Output

User Data Loaded

When to Use

Use a Resolve Guard when you want to make sure data is ready before showing a page. This is helpful when the page depends on data from a server or database.

For example, if you have a profile page that needs user details, using a resolve guard avoids showing an empty page or loading spinner. Instead, the page appears fully loaded with data.

It also helps avoid errors from missing data and improves user experience by reducing flicker or waiting times after navigation.

Key Points

• A Resolve Guard fetches data before route activation.
• It delays showing the component until data is ready.
• Helps avoid empty or loading states in components.
• Improves user experience by preloading necessary data.
• Implemented as a service that returns data or an observable.

Key Takeaways

Resolve guards fetch data before a route loads to ensure components have needed info.

They improve user experience by preventing empty or loading screens.

Use resolve guards when your page depends on data from servers or APIs.

Resolve guards return data or observables that Angular waits for before activating routes.

They are implemented as injectable services linked in route configuration.