Angular Routing, Guards & Lazy Loading #3

Routing, Guards, and Lazy Loading — are core Angular interview topics, especially for real-world apps with multiple modules and role-based access.

Here’s your paper-and-pen-friendly breakdown, ready for your notebook.

🔁 1. Angular Routing

Routing lets Angular apps behave like SPAs (Single Page Applications) by navigating between components without reloading the page.

✅ How It Works

• Routes are defined in a Routes array
• Each route maps a path to a component
• You use <router-outlet> in your HTML to display the routed component

🧱 Example: Basic Routing

// app-routing.module.ts
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'profile/:id', component: ProfileComponent },
  { path: '**', redirectTo: 'home' }
];

<!-- app.component.html -->
<nav>
  <a routerLink="/home">Home</a>
  <a [routerLink]="['/profile', 101]">Profile</a>
</nav>
<router-outlet></router-outlet>

🔐 2. Route Guards

Guards decide whether a route can be activated, loaded, or deactivated.

🔒 Common Guards

✅ CanActivate Example:

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService) {}

  canActivate(): boolean {
    return this.authService.isLoggedIn();
  }
}

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

🧳 3. Lazy Loading

Lazy loading loads feature modules only when the user navigates to them, improving performance.

🔧 Setup Lazy Loading:

1. Create a Feature Module (e.g., AdminModule)

ng g module admin --route admin --module app.module

2. Use loadChildren in Route

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
];

3. In Admin Module, define child routes

const adminRoutes: Routes = [
  { path: '', component: AdminHomeComponent },
  { path: 'users', component: AdminUsersComponent }
];

📊 Comparison: Lazy Loading vs Eager Loading

💬 Common Interview Questions

1. How to prevent unauthenticated users from accessing routes?
   👉 Use CanActivate guard
2. Difference between CanActivate and CanLoad?
   👉 CanActivate protects access; CanLoad prevents loading lazy module
3. How do you implement Lazy Loading?
   👉 Use loadChildren + separate feature module + its own routing
4. Where to use CanDeactivate?
   👉 On forms where unsaved data may be lost (e.g., editing profile)

✅ Summary Table

Would you like next:

• 🧪 A quick test of 5 questions to practice?
• 🔄 Notes on @ViewChild() + ngAfterViewInit() for DOM access?

Let me know — and keep filling those pages! 🖊️📘