Backend interview prep

Start

Angular Route Guards

Master Angular Route Guards with CanActivate, CanActivateChild, CanDeactivate, CanMatch, Resolve, authentication, authorization, standalone routing, architecture diagrams, enterprise examples, best practices, and interview questions.

Route Guards are one of Angular's most important security and navigation features.

They allow developers to control whether a user can navigate to, leave, or load a route based on application logic such as:

  • Authentication
  • Authorization
  • User Roles
  • Unsaved Changes
  • Feature Flags
  • License Validation
  • Subscription Plans

Route Guards help secure Angular applications by preventing unauthorized access before a route is activated.

They are widely used in enterprise applications like:

  • Banking
  • Healthcare
  • E-Commerce
  • Insurance
  • Government Portals

Table of Contents

  • What are Route Guards?
  • Why Route Guards?
  • Types of Route Guards
  • CanActivate
  • CanActivateChild
  • CanDeactivate
  • CanMatch
  • Resolve
  • Multiple Guards
  • Standalone Route Guards
  • Enterprise Banking Example
  • Best Practices
  • Common Mistakes
  • Top 10 Interview Questions
  • Summary

What are Route Guards?

A Route Guard is a function or service that Angular executes before navigation completes.

The guard decides whether navigation should:

  • Continue
  • Be cancelled
  • Redirect to another page

Route Guard Architecture

flowchart LR

User

User --> Router

Router --> RouteGuard

RouteGuard --> Authentication

Authentication --> Allow

Authentication --> Deny

Allow --> Component

Deny --> Login

Why Use Route Guards?

Without Route Guards

User

↓

Dashboard

↓

Admin

↓

Payments

↓

Settings

Anyone can access protected pages.

Problems

  • Security risks
  • Unauthorized access
  • Data leakage
  • Poor user experience

With Route Guards

User

↓

Authentication

↓

Authorization

↓

Dashboard

Benefits

  • Secure navigation
  • Role-based access
  • Better user experience
  • Cleaner architecture
  • Centralized access control

Types of Angular Route Guards

Guard Purpose
CanActivate Allow or deny route activation
CanActivateChild Protect child routes
CanDeactivate Prevent leaving a page
CanMatch Decide whether a route definition should match
Resolve Fetch data before route activation

Note: Modern Angular applications typically use CanMatch instead of the older CanLoad for lazy-loaded routes because it participates in route matching.

Guard Execution Flow

flowchart TD

Navigation

Navigation --> CanMatch

CanMatch --> CanActivate

CanActivate --> Resolve

Resolve --> ComponentLoaded

CanActivate

The most commonly used Route Guard.

Example

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

export const authGuard: CanActivateFn = () => {

  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) {
    return true;
  }

  return router.createUrlTree(['/login']);

};

Apply

{
  path: 'dashboard',
  component: DashboardComponent,
  canActivate: [authGuard]
}

CanActivate Flow

flowchart LR

Dashboard

Dashboard --> AuthGuard

AuthGuard --> AuthService

AuthService --> Allow

AuthService --> Redirect

Allow --> DashboardComponent

Redirect --> Login

CanActivateChild

Protects every child route under a parent.

Example

export const routes: Routes = [

{
path:'admin',

component:AdminComponent,

canActivateChild:[
adminGuard
],

children:[

{
path:'users',
component:UsersComponent
},

{
path:'roles',
component:RolesComponent
}

]

}

];

Every child route is protected automatically.

Child Route Architecture

flowchart TD

Admin

Admin --> Users

Admin --> Roles

Admin --> Settings

Admin --> CanActivateChild

CanDeactivate

Used to prevent users from leaving a page with unsaved changes.

Example

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

export const unsavedGuard:
CanDeactivateFn<EditProfileComponent> =
(component) => {

  return component.canExit();

};

Component

canExit() {

  return confirm(
    'Discard your changes?'
  );

}

CanDeactivate Flow

flowchart LR

EditPage

EditPage --> UnsavedChanges

UnsavedChanges --> Leave

UnsavedChanges --> Stay

CanMatch

Controls whether a route definition should match the current URL.

Example

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

export const adminMatchGuard: CanMatchFn = () => {

  const auth = inject(AuthService);

  return auth.isAdmin();

};

Route

{
  path: 'admin',
  canMatch: [adminMatchGuard],
  loadChildren: () =>
    import('./admin/admin.routes')
      .then(r => r.ADMIN_ROUTES)
}

CanMatch Architecture

flowchart TD

Router

Router --> CanMatch

CanMatch --> AdminRole

AdminRole --> AdminRoutes

AdminRole --> NextMatchingRoute

Resolve

A Resolver loads required data before the component is displayed.

Example

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

export const employeeResolver:
ResolveFn<Employee[]> = () => {

  return inject(EmployeeService)
    .getEmployees();

};

Route

{
path:'employees',

component:EmployeesComponent,

resolve:{
employees:employeeResolver
}
}

Component

employees =
this.route.snapshot.data['employees'];

Resolver Flow

flowchart LR

Navigation

Navigation --> Resolver

Resolver --> API

API --> Data

Data --> Component

Multiple Guards

A route can use multiple guards.

{
path:'payments',

component:PaymentsComponent,

canMatch:[
licenseGuard
],

canActivate:[
authGuard,
roleGuard
]
}

Angular evaluates each configured guard. Navigation proceeds only if all required checks succeed.

Multiple Guard Flow

flowchart TD

Navigation

Navigation --> AuthGuard

AuthGuard --> RoleGuard

RoleGuard --> LicenseGuard

LicenseGuard --> Component

Standalone Route Guards

Modern Angular encourages functional guards.

export const authGuard:
CanActivateFn = () => {

const auth =
inject(AuthService);

return auth.isLoggedIn();

};

Advantages

  • Less boilerplate
  • Better tree shaking
  • Cleaner code
  • Simpler testing

Functional Guard Architecture

flowchart LR
    A["Router"]
    B["Guard Function"]
    C["inject()"]
    D["Auth Service"]

    A --> B
    B --> C
    C --> D

Enterprise Banking Example

Features

  • Login
  • Dashboard
  • Accounts
  • Payments
  • Investments
  • Loans
  • Admin

Security

  • Authentication
  • Authorization
  • Premium Features
  • Session Validation

Architecture

flowchart TD

User

User --> AuthGuard

AuthGuard --> RoleGuard

RoleGuard --> SubscriptionGuard

SubscriptionGuard --> BankingDashboard

BankingDashboard --> Accounts

BankingDashboard --> Loans

BankingDashboard --> Payments

Benefits

  • Secure navigation
  • Better compliance
  • Centralized authorization
  • Consistent user experience
  • Reduced duplicate checks

Route Guard Comparison

Guard Use Case
CanActivate Secure a route
CanActivateChild Secure nested routes
CanDeactivate Prevent data loss
CanMatch Control route matching and lazy routes
Resolve Preload route data

Performance Best Practices

Practice Benefit
Keep guards lightweight Faster navigation
Delegate business logic to services Better maintainability
Return UrlTree for redirects Cleaner routing flow
Use Resolvers only when data is required before rendering Better UX
Prefer functional guards Modern Angular
Avoid unnecessary API calls in guards Improved performance

Common Mistakes

Putting Business Logic Inside Guards

Guards should make routing decisions.

Move business logic into services.

Making Multiple API Calls

Avoid repeated server requests inside guards.

Cache authentication or permission data when appropriate.

Using Guards for UI Validation

Guards control navigation.

Form validation belongs in components and validation logic.

Ignoring Authorization

Authentication alone is insufficient.

Verify user permissions and roles where required.

Blocking Navigation Unnecessarily

Only protect routes that require access control.

Best Practices

  • Use CanActivate for authentication.
  • Use CanActivateChild for nested routes.
  • Use CanDeactivate to protect unsaved work.
  • Use CanMatch for conditional route matching.
  • Use Resolve for required startup data.
  • Prefer functional guards (CanActivateFn, CanMatchFn, etc.).
  • Keep guards simple and delegate logic to services.
  • Return UrlTree instead of navigating imperatively when redirecting.

Advantages

Feature Benefit
Authentication Secure routes
Authorization Role-based access
Data Protection Prevent accidental navigation
Better UX Controlled navigation
Cleaner Architecture Centralized security
Enterprise Ready Compliance and scalability

Top 10 Angular Route Guards Interview Questions

1. What are Route Guards?

Answer

Route Guards are Angular features that determine whether navigation to or from a route should be allowed, redirected, or cancelled.

2. What is CanActivate?

Answer

CanActivate determines whether a route can be activated before the target component is created.

3. What is CanActivateChild?

Answer

It protects all child routes under a parent route.

4. What is CanDeactivate?

Answer

CanDeactivate prevents users from leaving a component when there are unsaved changes or other conditions that should block navigation.

5. What is CanMatch?

Answer

CanMatch decides whether a route definition should match the current navigation request. It is commonly used with lazy-loaded routes and conditional routing.

6. What is a Resolver?

Answer

A Resolver retrieves required data before route activation so the component can start with the necessary information already available.

7. Can multiple guards be used on the same route?

Answer

Yes.

A route can use multiple guards, and Angular evaluates them according to the route configuration before completing navigation.

8. Why are functional guards preferred?

Answer

Functional guards reduce boilerplate, support tree shaking, integrate well with inject(), and align with modern Angular development.

9. Should Route Guards replace backend security?

Answer

No.

Route Guards improve client-side navigation and user experience, but backend APIs must always enforce authentication and authorization independently.

10. What are Route Guard best practices?

Answer

  • Keep guards lightweight.
  • Delegate business logic to services.
  • Use functional guards.
  • Return UrlTree for redirects.
  • Cache permission data when appropriate.
  • Protect only routes that require security.

Interview Cheat Sheet

Topic Remember
CanActivate Enter route
CanActivateChild Protect child routes
CanDeactivate Prevent leaving
CanMatch Route matching
Resolve Load data first
Functional Guards Modern Angular
inject() Access dependencies
UrlTree Redirect
Backend Security Always required
Best Practice Keep guards lightweight

Summary

Angular Route Guards provide a powerful mechanism for securing navigation and improving user experience. Guards such as CanActivate, CanActivateChild, CanDeactivate, CanMatch, and Resolve allow developers to authenticate users, authorize access, protect unsaved changes, conditionally match routes, and preload data before components are displayed. Combined with functional guard APIs and standalone routing, Route Guards are an essential part of modern enterprise Angular applications.

Key Takeaways

  • ✔ Route Guards control navigation before or during routing.
  • ✔ Use CanActivate for authentication checks.
  • ✔ Use CanActivateChild to secure nested routes.
  • ✔ Use CanDeactivate to prevent losing unsaved changes.
  • ✔ Use CanMatch for conditional route matching.
  • ✔ Use Resolve to preload required route data.
  • ✔ Prefer functional guards with inject().
  • ✔ Keep guards lightweight and delegate business logic.
  • ✔ Always enforce security on the backend as well.
  • ✔ Route Guards are a core Angular interview topic.

Next Article

➡️ 47-Route-Resolvers-QA.md