Angular Guards

Angular Route Guards

Version: Angular 21 (2025) Tags: Guards, Routing, Auth, CanActivate

References: Guards Guide • CanActivate

API Changes

This section documents recent version-specific API changes.

• NEW: Functional guards — Use CanActivateFn instead of class-based

• NEW: CanMatch guard — Prevent lazy loading of unauthorized code

• NEW: provideRouter with guards — Modern guard registration

• DEPRECATED: Class-based guards — Migrate to functional

Best Practices

• Create functional guard

export const authGuard: CanActivateFn = () => {
  const authService = inject(AuthService);
  const router = inject(Router);
  
  if (authService.isAuthenticated()) {
    return true;
  }
  return router.createUrlTree(['/login']);
};

• Use CanActivate for route protection

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

• Use CanActivateChild for child routes