What are Route Guards in Angular
💡 Concept Name
Route Guards – Features in Angular that determine whether or not navigation to or from a route should be allowed, enabling control over route access.
📘 Quick Intro
Angular route guards allow you to protect routes by checking conditions before navigation. You can prevent unauthorized access, ask for confirmation before leaving a page, or block module loading based on user roles.
🧠 Analogy / Short Story
Think of guards like security checks at doors: only people with valid ID can enter (CanActivate), and people with unfinished tasks are warned before exiting (CanDeactivate). Guards ensure the "doors" of your app open only to the right people at the right time.
🔧 Technical Explanation
- 🔐 CanActivate: Checks if a user can access a route.
- 🚫 CanDeactivate: Checks if it's safe to leave a route.
- 📦 CanLoad: Prevents loading lazy-loaded modules unless conditions are met.
- 👶 CanActivateChild: Checks child route access.
- 📥 Resolve: Fetches data before activating a route.
- 📈 Guards return
boolean | Observable<boolean> | Promise<boolean>.
🎯 Purpose & Use Case
- ✅ Block unauthorized users from accessing secure routes.
- ✅ Prevent navigation if forms are unsaved.
- ✅ Control lazy loading of modules (e.g., admin modules).
- ✅ Secure child routes separately from parent routes.
💻 Real Code Example
// CanActivate example
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate(): boolean {
const isLoggedIn = true; // Simulated condition
if (!isLoggedIn) {
this.router.navigate(['/login']);
return false;
}
return true;
}
}
❓ Interview Q&A
Q1: What are route guards in Angular?
A: Interfaces used to control navigation and access to routes.
Q2: Which guard prevents unauthorized users from accessing a route?
A: CanActivate.
Q3: What is CanDeactivate used for?
A: To confirm if it's safe to leave a route (e.g., unsaved form).
Q4: What does CanLoad prevent?
A: Prevents loading of lazy-loaded modules unless conditions are met.
Q5: Where are guards configured?
A: In route configuration within the routing module.
📝 MCQs
Q1. What does CanActivate check?
- If a route can be accessed
- If component is rendered
- If data is saved
- If user is logged out
Q2. Which guard confirms before leaving a route?
- CanLoad
- Resolve
- CanDeactivate
- CanEnter
Q3. Which guard blocks module loading?
- CanDeactivate
- CanLoad
- CanActivate
- Resolve
Q4. Which Angular object defines route guards?
- AppComponent
- Router config
- Main.ts
- Polyfill.ts
Q5. What is returned by a guard?
- Component
- Boolean or Observable/Promise
- String
- null
Q6. Which guard is for child routes?
- CanChild
- CanActivateChild
- CanLoad
- CanAccess
Q7. What does Resolve do?
- Clears cache
- Fetches data before activating route
- Guards modules
- Loads CSS
Q8. Where is a guard implemented?
- In main.ts
- In service class
- In component.ts
- In HTML
Q9. Which guard is best for protecting login routes?
- Resolve
- CanDeactivate
- CanLoad
- CanActivate
Q10. What happens if CanActivate returns false?
- Navigation continues
- Component resets
- Route reloads
- Navigation is blocked
💡 Bonus Insight
Route guards help enforce clean UX and application security. Combine them with role-based auth systems to ensure only the right users can see specific content and perform actions in Angular apps.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!