Angular Academy · Lesson

Functional Route Guards

Protect routes with functional guards.

Functional Route Guards is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What are route guards

Guards decide whether navigation may proceed: protect routes behind auth, confirm before leaving a form, or restrict by role. Modern Angular uses functional guards — plain functions, no classes.

CanActivateFn

A CanActivateFn returns true to allow, false to block, a UrlTree to redirect, or an observable/promise of those.

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn();
};

Wiring a guard to a route

Attach guards with canActivate (an array, so you can stack several).

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

Redirecting with UrlTree

Returning a UrlTree (from router.createUrlTree or parseUrl) both blocks and redirects in one step.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() ? true : router.parseUrl('/login');
};

Async guards

Guards can return an observable — the router waits for the first value, then completes.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.checkSession$().pipe(
    map(ok => ok ? true : inject(Router).parseUrl('/login'))
  );
};

Accessing route info in a guard

A CanActivateFn receives the ActivatedRouteSnapshot and RouterStateSnapshot, so you can read params, data, and the attempted URL.

export const roleGuard: CanActivateFn = (route, state) => {
  const needed = route.data['role'];
  const auth = inject(AuthService);
  return auth.hasRole(needed);
};

canMatch guards

CanMatchFn decides whether a route definition matches at all — useful to swap routes by feature flag or lazy-load only when allowed.

import { CanMatchFn } from '@angular/router';

export const featureGuard: CanMatchFn = () =>
  inject(FeatureService).enabled('beta');

canDeactivate guards

CanDeactivateFn runs when leaving a route — perfect for unsaved-changes confirmations. It receives the component instance.

import { CanDeactivateFn } from '@angular/router';

export const unsavedGuard: CanDeactivateFn<FormComponent> =
  (component) => component.isPristine() || confirm('Discard changes?');

Stacking multiple guards

All guards in the array must allow navigation. They run together; if any returns false or a UrlTree, navigation is blocked or redirected.

canActivate: [authGuard, roleGuard]
// both must pass

Why functional over class guards

Functional guards are simpler: no @Injectable boilerplate, easy inject() usage, composable, and tree-shakable. Class-based CanActivate interfaces are deprecated.

Guards and child routes

canActivateChild protects all child routes of a parent in one place, avoiding repeating the guard on every child.

{ path: 'admin', canActivateChild: [authGuard],
  children: [ /* all protected */ ] }

Quick Check

Test your understanding of functional guards.

Recap: Functional Route Guards

Functional guards control navigation with plain functions.

CanActivateFn: allow/block/redirect (UrlTree).
CanMatchFn: match a route at all.
CanDeactivateFn: confirm leaving.
Use inject() for services; stack guards in arrays.

Next: router events and navigation.

Frequently asked questions

Is the “Functional Route Guards” lesson free?

Yes — the full text of “Functional Route Guards” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Functional Route Guards”?

Protect routes with functional guards. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Functional Route Guards” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy