Using resolve in Angular for API Calls Before Route Activation

When you want to fetch data before loading a component.
If the component depends on an API response (e.g., product details, user profile).
To prevent empty UI states while waiting for API data.
Useful for improving user experience by avoiding loading spinners in some cases.
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { ProductService } from '../services/product.service';

@Injectable({
providedIn: 'root'
})
export class ProductResolver implements Resolve {

constructor(private productService: ProductService) {}

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
const productId = route.paramMap.get('id'); // Get ID from route params
return this.productService.getProductById(productId); // Call API
}
}