Route Resolvers: Load Data Before Navigation

Resolvers fetch data before a route activates. This is perfect when: - the page cannot render without data - you want fewer loading states inside components - you want a smoother navigation experience ## Step 1: Create a resolver (functional resolver) ```ts import { ResolveFn } from '@angular/router'; import { inject } from '@angular/core'; import { UsersApi } from './users.api'; export const userResolver: ResolveFn<any> = (route) => { const api = inject(UsersApi); const id = route.paramMap.get('id')!; return api.getUser(id); }; ``` ## Step 2: Add it to the route ```ts { path: 'users/:id', loadComponent: () => import('./user-details.component').then(m => m.UserDetailsComponent), resolve: { user: userResolver }, } ``` ## Step 3: Read resolved data in component ```ts import { Component } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-user-details', standalone: true, template: ` <h2>{{ user?.name }}</h2> <p>Email: {{ user?.email }}</p> `, }) export class UserDetailsComponent { user: any; constructor(route: ActivatedRoute) { this.user = route.snapshot.data['user']; } } ``` ## Tradeoff Resolvers can slow navigation slightly because they fetch before page shows. Use when the UI truly depends on the data. > Next: Preloading strategies to speed up lazy routes.