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.