Angular Academy · Lesson

Functional Route Guards

Protect routes with functional guards.

Lesson 3 of 413 steps

Functional Route Guards is a free Angular Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Functional Route Guards” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Functional Route Guards”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

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