mediumFrontend

What are route guards in Angular?

Q: What are route guards in Angular?

**Core concept.** Route guards are functions that decide whether a navigation may proceed. The main ones: CanActivate (allowed to **enter** a route?), CanDeactivate (allowed to **leave**? — e.g. unsaved-changes prompt), CanMatch (should this route/lazy chunk match at all?), and resolvers (pre-fetch data). They return a boolean, a UrlTree (redirect), or an Observable/Promise of those. navigation <rect class='d-box-accent' x='176' y='52' width='110' height

1.0k views

Understand the problem

Explain guards and resolvers.

routingguards

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A functional auth guard

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

export const authGuard: CanActivateFn = () => {
  const router = inject(Router);
  const loggedIn = !!localStorage.getItem('token');
  // allow, or redirect to /login via a UrlTree
  return loggedIn ? true : router.createUrlTree(['/login']);
};

// usage:
// { path: 'admin', component: AdminComponent, canActivate: [authGuard] }

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you handle SSR hydration mismatch errors using ngSkipHydration?

What is standard content projection vs. Multi-Slot Content Projection?