Angular Guards

Name: Angular Guards
Author: oguzhan18

oguzhan18/angular-ecosystem-skills

182 installs
6 repo stars
Updated April 4, 2026
oguzhan18/angular-ecosystem-skills

Implement CanActivate, CanDeactivate, and resolver guards to protect routes, enforce roles, prefetch data, and block navigation when forms are dirty in Angular apps.

About

Guides implementation of Angular route guards for authentication, authorization, lazy-loading protection, and navigation blocking. Covers functional guards, resolver patterns, and integration with auth services and observables.

CanActivate and CanMatch guard patterns
Role-based and async auth checks
CanDeactivate unsaved-change protection
Route resolvers for data prefetch
Functional vs class guard styles

Angular Guards by the numbers

182 all-time installs (skills.sh)
+1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #889 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 4, 2026 (Skillselion catalog sync)

npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-guards

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/oguzhan18/angular-ecosystem-skills/angular-guards.svg)](https://skillselion.com/skills/oguzhan18/angular-ecosystem-skills/angular-guards)

Installs	182
repo stars	★ 6
Last updated	April 4, 2026
Repository	oguzhan18/angular-ecosystem-skills ↗

What it does

Implement CanActivate, CanDeactivate, and resolver guards to protect routes, enforce roles, prefetch data, and block navigation when forms are dirty in Angular apps.

Files

SKILL.mdMarkdownGitHub ↗

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

export const adminGuard: CanActivateChildFn = () => {
  const auth = inject(AuthService);
  return auth.isAdmin() || inject(Router).createUrlTree(['/unauthorized']);
};

const routes: Routes = [
  {
    path: 'admin',
    canActivateChild: [adminGuard],
    children: [...]
  }
];

Use CanMatch for lazy loading

const routes: Routes = [
  {
    path: 'admin',
    canMatch: [authGuard],
    loadComponent: () => import('./admin/admin.component')
  }
];

Use CanDeactivate for unsaved changes

export const canDeactivateGuard: CanDeactivateFn<CanComponentDeactivate> = (component) => {
  if (component.hasUnsavedChanges?.()) {
    return confirm('You have unsaved changes. Are you sure?');
  }
  return true;
};

Use withComponentInputBinding

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withComponentInputBinding())
  ]
};

Use multiple guards

const routes: Routes = [
  {
    path: 'admin',
    canActivate: [authGuard, adminGuard],
    loadComponent: () => import('./admin/admin.component')
  }
];

Pass data to guards

const routes: Routes = [
  {
    path: 'user/:id',
    canActivate: [userGuard],
    data: { requiredRole: 'admin' }
  }
];

export const userGuard: CanActivateFn = (route, state) => {
  const requiredRole = route.data['requiredRole'];
  // Check role
};