Guards and Resolvers

Functional guards are the modern approach. They are simple functions that decide whether navigation proceeds.

canActivate — Protect a Route

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn) {
    return true;
  }

  // Redirect to login with return URL
  return router.createUrlTree(['/login'], {
    queryParams: { returnUrl: state.url },
  });
};

export const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [authGuard] },
];

canMatch — Conditionally Match a Route

export const adminGuard: CanMatchFn = (route, segments) => {
  const authService = inject(AuthService);
  return authService.isAdmin;
};

export const routes: Routes = [
  {
    path: 'admin',
    canMatch: [adminGuard],
    loadChildren: () => import('./admin/admin.routes'),
  },
];

canDeactivate — Prevent Leaving a Route

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

export const unsavedChangesGuard: CanDeactivateFn<CanComponentDeactivate> = (
  component: CanComponentDeactivate
) => {
  return component.canDeactivate ? component.canDeactivate() : true;
};

Guard Return Types

Resolvers fetch data before a route activates, ensuring the component renders with content already available.

Creating a Resolver

import { inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { UserService } from './user.service';

export const userResolver: ResolveFn<User> = (route, state) => {
  const userService = inject(UserService);
  const id = route.paramMap.get('id')!;
  return userService.getUser(Number(id));
};

export const routes: Routes = [
  {
    path: 'users/:id',
    component: UserDetailComponent,
    resolve: { user: userResolver },
  },
];

Accessing Resolved Data

@Component({
  selector: 'app-user-detail',
  template: `<h1>{{ user.name }}</h1>`,
})
export class UserDetailComponent {
  private route = inject(ActivatedRoute);
  user!: User;

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

Resolver with Loading State

export const userResolver: ResolveFn<User> = (route, state) => {
  const userService = inject(UserService);
  const id = route.paramMap.get('id')!;

  return userService.getUser(Number(id)).pipe(
    catchError(() => {
      // Handle error — redirect or return default
      return of(null);
    })
  );
};

Guard + Resolver Combination

export const routes: Routes = [
  {
    path: 'users/:id',
    canActivate: [authGuard],
    resolve: { user: userResolver },
    component: UserDetailComponent,
  },
];

The guard runs first. If it passes, the resolver fetches data. Then the component renders with the resolved data.