mcpField
A
angular-guards

angular-guards

github.com/oguzhan18Development7184 installsUpdated 30w ago
Repository

About angular-guards

angular-guards is a reference skill for Angular 21 developers configuring route guards. It explains functional guards and patterns for access control, lazy loading, child routes, and unsaved changes.

Key features

  1. 01Functional guard setup
  2. 02Protecting routes with CanActivate
  3. 03Guarding child routes
  4. 04Controlling lazy loading with CanMatch
  5. 05Blocking navigation for unsaved changes
  6. 06Registering guards with provideRouter

Use cases

  1. 01Restricting dashboard access to authenticated users
  2. 02Checking admin access before lazy loading
  3. 03Protecting nested admin routes
  4. 04Warning before leaving unsaved edits

Install

Copy the command and run it in a terminal.

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

After installing, type/angular-guardsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

Details

From the project README

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
};

Comments

Markdown supported