Route Guards — CanActivate, CanDeactivate and Resolve

Route guards are functions that run before Angular completes a navigation — they can allow, redirect, or cancel the navigation. Angular 15+ uses simple functional guards rather than class-based implementations, making them easier to write and test. The auth guard protects private routes by checking whether the user is logged in. The deactivate guard prevents accidental form abandonment. The resolve guard pre-fetches data before the component renders, avoiding skeleton/loading states for critical page data.

Functional Route Guards #

import { CanActivateFn, CanDeactivateFn, ResolveFn, Router } from '@angular/router';
import { inject } from '@angular/core';

// ── Auth guard — redirect to login if not authenticated ───────────────────
export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router      = inject(Router);

  if (authService.isLoggedIn()) return true;

  // Store the attempted URL so we can redirect after login
  return router.createUrlTree(['/auth/login'], {
    queryParams: { returnUrl: state.url }
  });
};

// ── Admin guard — require Admin role ──────────────────────────────────────
export const adminGuard: CanActivateFn = () => {
  const authService = inject(AuthService);
  const router      = inject(Router);

  if (authService.hasRole('Admin')) return true;

  // Authenticated but not admin — show forbidden page
  return router.createUrlTree(['/forbidden']);
};

// ── Unsaved changes guard ─────────────────────────────────────────────────
export interface HasUnsavedChanges {
  hasUnsavedChanges(): boolean;
}

export const unsavedChangesGuard: CanDeactivateFn<HasUnsavedChanges> = (component) => {
  if (!component.hasUnsavedChanges()) return true;

  return confirm('You have unsaved changes. Leave anyway?');
  // Returning false cancels navigation and stays on the current route
};

// Apply to a form component:
// { path: 'posts/:id/edit', component: PostEditComponent,
//   canDeactivate: [unsavedChangesGuard] }

// ── Resolve guard — pre-fetch data before component renders ───────────────
export const postResolver: ResolveFn<PostDto> = (route) => {
  const api    = inject(PostsApiService);
  const router = inject(Router);
  const slug   = route.paramMap.get('slug')!;

  return api.getBySlug(slug).pipe(
    catchError(() => {
      router.navigate(['/not-found']);
      return EMPTY;  // cancel the navigation
    }),
  );
};

// ── Route with resolver — data available synchronously in component ───────
// { path: 'posts/:slug', component: PostDetailComponent,
//   resolve: { post: postResolver } }

// In the component:
// @Component({ standalone: true, template: '...' })
// export class PostDetailComponent implements OnInit {
//   @Input() post!: PostDto;   // withComponentInputBinding maps resolve data to @Input
// }

// ── Combining guards ───────────────────────────────────────────────────────
// { path: 'admin/posts', canActivate: [authGuard, adminGuard] }
// Both guards must return true; if either returns false/UrlTree, navigation stops

Common Mistakes #

Mistake 1 — Using router.navigate() inside a guard instead of returning UrlTree #

❌ Wrong — calling router.navigate(['/login']) inside a guard creates nested navigation; may cause issues.

✅ Correct — return router.createUrlTree(['/login']) from the guard function.

Mistake 2 — Forgetting to handle resolve errors (navigation hangs if API fails) #

❌ Wrong — resolver throws; navigation never completes; user sees blank page with spinner.

✅ Correct — use catchError(() => { router.navigate(['/not-found']); return EMPTY; }) in resolvers.