Backend interview prep

Start

Angular Routing

Learn Angular Routing from beginner to advanced with routes, RouterOutlet, RouterLink, lazy loading, route guards, nested routes, standalone routing, architecture diagrams, enterprise examples, best practices, and interview questions.

Angular Routing enables navigation between different views (pages) in a Single Page Application (SPA) without reloading the browser.

Instead of requesting a new HTML page from the server every time a user clicks a link, Angular dynamically loads the appropriate component while keeping the application running.

Angular Routing provides:

  • Navigation
  • URL Management
  • Lazy Loading
  • Route Guards
  • Nested Routes
  • Parameterized Routes
  • Query Parameters
  • Standalone Routing
  • Better User Experience

Angular Routing is one of the most frequently asked topics in Angular interviews.

Table of Contents

  • What is Angular Routing?
  • Why Routing?
  • Routing Architecture
  • Configuring Routes
  • RouterOutlet
  • RouterLink
  • Route Parameters
  • Query Parameters
  • Nested Routes
  • Lazy Loading
  • Route Guards
  • Standalone Routing
  • Enterprise Banking Example
  • Best Practices
  • Common Mistakes
  • Top 10 Interview Questions
  • Summary

What is Angular Routing?

Angular Routing is a mechanism that maps a URL to a specific Angular Component.

Example

URL Component
/ HomeComponent
/login LoginComponent
/dashboard DashboardComponent
/employees EmployeeComponent
/profile ProfileComponent

Routing Architecture

flowchart LR

Browser

Browser --> Router

Router --> RouteConfiguration

RouteConfiguration --> HomeComponent

RouteConfiguration --> LoginComponent

RouteConfiguration --> DashboardComponent

Why Angular Routing?

Without Routing

Application

↓

One Huge Component

↓

Everything Inside

Problems

  • Difficult maintenance
  • Large components
  • No navigation
  • Poor scalability

With Routing

Home

↓

Login

↓

Dashboard

↓

Employees

↓

Settings

Benefits

  • Clean URLs
  • Modular architecture
  • Better scalability
  • Faster navigation
  • Lazy loading support

Basic Route Configuration

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

export const routes: Routes = [

  {
    path: '',
    component: HomeComponent
  },

  {
    path: 'employees',
    component: EmployeeComponent
  },

  {
    path: 'dashboard',
    component: DashboardComponent
  }

];

Route Configuration Flow

flowchart TD

Routes

Routes --> HomeRoute

Routes --> DashboardRoute

Routes --> EmployeeRoute

HomeRoute --> HomeComponent

DashboardRoute --> DashboardComponent

EmployeeRoute --> EmployeeComponent

Bootstrapping Routing (Standalone)

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
});

RouterOutlet

RouterOutlet is a placeholder where Angular renders the matched route component.

<router-outlet></router-outlet>

When users navigate:

/dashboard

Angular loads

DashboardComponent

inside the outlet.

RouterOutlet Architecture

flowchart LR

URL

URL --> Router

Router --> RouterOutlet

RouterOutlet --> Component

RouterLink

Navigate without reloading the page.

<a routerLink="/">Home</a>

<a routerLink="/dashboard">
Dashboard
</a>

<a routerLink="/employees">
Employees
</a>

Dynamic routing

<a
  [routerLink]="['/employees',101]"
>
Employee
</a>

Navigation Using Router

Programmatic navigation

constructor(
  private router: Router
){}

login(){

  this.router.navigate([
    '/dashboard'
  ]);

}

Navigation Flow

sequenceDiagram

participant User

participant Component

participant Router

participant Dashboard

User->>Component: Click Login

Component->>Router: navigate()

Router->>Dashboard: Load Component

Dashboard-->>User: Display View

Route Parameters

Routes

{
  path:'employees/:id',
  component:EmployeeDetailsComponent
}

Navigate

/employees/101

Read parameter

constructor(
  private route: ActivatedRoute
){}

id =
this.route.snapshot.paramMap.get('id');

Route Parameter Flow

flowchart LR

URL

URL --> Router

Router --> Parameter

Parameter --> Component

Query Parameters

Navigate

this.router.navigate(
['/employees'],
{
queryParams:{
department:'IT',
page:2
}
});

URL

/employees?department=IT&page=2

Read query parameters

this.route.queryParamMap.subscribe(
params=>{

console.log(
params.get('department')
);

});

Query Parameter Architecture

flowchart LR

Component

Component --> Router

Router --> URL

URL --> QueryParameters

QueryParameters --> Component

Child (Nested) Routes

export const routes: Routes = [

{
path:'dashboard',

component:DashboardComponent,

children:[

{
path:'accounts',

component:AccountsComponent
},

{
path:'payments',

component:PaymentsComponent
}

]

}

];

URLs

/dashboard/accounts

/dashboard/payments

Nested Routing Architecture

flowchart TD

Dashboard

Dashboard --> RouterOutlet

RouterOutlet --> Accounts

RouterOutlet --> Payments

Redirect Routes

{
  path:'',
  redirectTo:'home',
  pathMatch:'full'
}

Unknown route

{
  path:'**',
  component:NotFoundComponent
}

Lazy Loading

Instead of loading every feature during startup, Angular can load feature routes only when users navigate to them.

{
  path:'admin',

  loadChildren:()=>

    import('./admin/admin.routes')

    .then(m=>m.ADMIN_ROUTES)

}

Benefits

  • Faster startup
  • Smaller bundles
  • Better performance

Lazy Loading Architecture

flowchart TD

Application

Application --> Home

Application --> Dashboard

Application --> LazyModule

LazyModule --> Admin

LazyModule --> Reports

Route Guards

Protect routes from unauthorized access.

Example

export const authGuard: CanActivateFn =
() => {

const auth =
inject(AuthService);

return auth.isLoggedIn();

};

Apply

{
path:'dashboard',

component:DashboardComponent,

canActivate:[
authGuard
]
}

Route Guard Flow

flowchart LR

User

User --> Guard

Guard --> AuthService

AuthService --> Allow

AuthService --> Deny

Allow --> Dashboard

Deny --> Login

Standalone Routing

Angular supports routing without NgModules.

bootstrapApplication(
AppComponent,
{
providers:[
provideRouter(routes)
]
});

Advantages

  • Simpler configuration
  • Better tree shaking
  • Smaller applications

Enterprise Banking Example

Modules

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

Architecture

flowchart TD

Login

Login --> Dashboard

Dashboard --> Accounts

Dashboard --> Payments

Dashboard --> Loans

Dashboard --> Investments

Dashboard --> Admin

Admin --> LazyLoadedModule

Dashboard --> BankingAPI

Benefits

  • Secure navigation
  • Lazy loading
  • Route guards
  • Modular architecture
  • Better scalability

Angular Router Features

Feature Purpose
RouterOutlet Display routed component
RouterLink Navigation
Router Programmatic navigation
ActivatedRoute Read route information
Route Parameters Dynamic URLs
Query Parameters Optional URL data
Lazy Loading Performance
Route Guards Security
Child Routes Nested navigation
Redirect Routes URL redirection

Performance Best Practices

Practice Benefit
Use Lazy Loading Faster startup
Protect routes with Guards Better security
Keep routes modular Easier maintenance
Prefer Standalone Routing Simpler architecture
Avoid unnecessary route nesting Better readability
Preload large features when appropriate Faster subsequent navigation

Common Mistakes

Loading Every Feature at Startup

Use Lazy Loading for large applications.

Missing Wildcard Route

Always define

{
path:'**',
component:NotFoundComponent
}

Business Logic Inside Routing

Keep routing focused on navigation.

Place business logic inside services.

Deeply Nested Routes

Avoid excessive nesting because it increases complexity.

Hardcoding URLs

Prefer

routerLink

instead of manually constructing URLs in templates.

Best Practices

  • Use feature-based routing.
  • Use standalone routing for new Angular applications.
  • Lazy load large features.
  • Protect secure pages using route guards.
  • Keep routing configuration organized.
  • Use parameterized routes for dynamic pages.
  • Add wildcard routes for unknown URLs.
  • Keep components focused on presentation.

Advantages

Feature Benefit
SPA Navigation No page reload
Lazy Loading Better performance
Route Guards Secure navigation
Clean URLs Better UX
Nested Routes Modular UI
Standalone Support Modern Angular

Top 10 Angular Routing Interview Questions

1. What is Angular Routing?

Answer

Angular Routing maps URLs to components, enabling navigation in Single Page Applications without reloading the browser.

2. What is RouterOutlet?

Answer

RouterOutlet is a directive that acts as a placeholder where Angular displays the component that matches the active route.

Answer

RouterLink is a directive used for declarative navigation between routes without refreshing the page.

4. What is the difference between route parameters and query parameters?

Answer

  • Route parameters identify a specific resource and are part of the route path (for example, /employees/101).
  • Query parameters provide optional information appended to the URL (for example, /employees?page=2).

5. What is Lazy Loading?

Answer

Lazy Loading loads feature routes only when users navigate to them, improving startup performance and reducing initial bundle size.

6. What are Route Guards?

Answer

Route Guards determine whether navigation to a route should be allowed, redirected, or blocked based on application logic such as authentication or authorization.

7. What is ActivatedRoute?

Answer

ActivatedRoute provides access to route information such as route parameters, query parameters, route data, and URL segments.

8. What is a wildcard route?

Answer

A wildcard route (**) matches unknown URLs and is commonly used to display a 404 Not Found page.

9. What are child routes?

Answer

Child routes define nested navigation within a parent route, allowing multiple levels of routing inside a feature.

10. What are Angular Routing best practices?

Answer

  • Use standalone routing for modern applications.
  • Organize routes by feature.
  • Lazy load large modules or route groups.
  • Protect secure routes with guards.
  • Use route parameters for resource identifiers.
  • Add wildcard routes for unknown paths.
  • Keep routing configuration clean and maintainable.

Interview Cheat Sheet

Topic Remember
Router Navigation engine
Routes URL mapping
RouterOutlet Displays components
RouterLink Template navigation
ActivatedRoute Read route information
Route Params /users/:id
Query Params ?page=1
Lazy Loading Better performance
Route Guards Secure navigation
Wildcard Route **

Summary

Angular Routing provides a powerful and flexible way to navigate between views in Single Page Applications. Features such as RouterOutlet, RouterLink, route parameters, query parameters, lazy loading, route guards, and standalone routing help developers build scalable, secure, and high-performance enterprise applications. Mastering Angular Routing is essential for both day-to-day development and technical interviews.

Key Takeaways

  • ✔ Angular Routing maps URLs to components.
  • ✔ RouterOutlet displays the active routed component.
  • ✔ RouterLink enables client-side navigation.
  • ✔ Use route parameters for dynamic resources.
  • ✔ Use query parameters for optional filters and settings.
  • ✔ Protect routes using Route Guards.
  • ✔ Lazy load large features to improve performance.
  • ✔ Use wildcard routes for unknown URLs.
  • ✔ Prefer standalone routing in modern Angular applications.
  • ✔ Angular Routing is one of the most important Angular interview topics.

Next Article

➡️ 45-RouterModule-and-provideRouter-QA.md