What is the Angular router and how does route configuration work?
Learn how the Angular router works and how to configure routes mapping paths to components, with lazy loading, guards, params, and wildcard fallback examples.
Expected Interview Answer
The Angular router is the framework's navigation system that maps URL paths to components, enabling single-page navigation without full page reloads; you configure it with an array of Route objects that pair each path with the component or lazy-loaded module to display.
Routes are defined as an array of { path, component } (or loadComponent/loadChildren) objects passed to provideRouter or RouterModule.forRoot. The router matches the current URL against these routes in order, renders the matched component into a <router-outlet>, and supports parameters, child routes, guards, redirects, and wildcard fallbacks. Navigation happens via routerLink directives or the Router service, updating the browser URL while keeping the app a single page.
- Enables single-page app navigation without reloads
- Maps clean URLs to components and views
- Supports lazy loading for smaller initial bundles
- Guards protect and control access to routes
- Route parameters pass data through the URL
AI Mentor Explanation
The Angular router is like a fielding chart that tells each ball where it should be directed based on the shot played. A configured route array is the captain's plan mapping situations to positions; when a delivery matches a pattern, the right fielder — the component — takes it, all without stopping the match to reset the field.
Step-by-Step Explanation
Step 1
Define routes
Create a Routes array pairing each path with a component, loadComponent, or loadChildren.
Step 2
Register the router
Pass the routes to provideRouter (standalone) or RouterModule.forRoot in a module.
Step 3
Add a router-outlet
Place <router-outlet> in the template where matched components should render.
Step 4
Link navigation
Use routerLink directives or inject Router and call navigate/navigateByUrl.
Step 5
Handle params and fallbacks
Read route params via ActivatedRoute and add a wildcard '**' route for 404 pages.
What Interviewer Expects
- Understanding routes map paths to components
- Knowledge of provideRouter or RouterModule.forRoot setup
- Role of router-outlet and routerLink
- Lazy loading with loadChildren/loadComponent
- Route parameters, guards, and wildcard routes
Common Mistakes
- Forgetting to add a router-outlet in the template
- Placing the wildcard route before specific routes
- Using href instead of routerLink and causing full reloads
- Not ordering routes correctly so matching fails
- Confusing forRoot and forChild registration
Best Answer (HR Friendly)
“The Angular router lets a single-page app show different screens for different URLs without reloading the page. You give it a list that matches each web address to a component, and it swaps the right view into place as the user navigates.”
Code Example
import { Routes } from '@angular/router';
export const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'users/:id', component: UserDetailComponent },
{
path: 'admin',
loadChildren: () => import('./admin/admin.routes').then(m => m.ADMIN_ROUTES),
canActivate: [authGuard],
},
{ path: '**', component: NotFoundComponent }, // wildcard must be last
];Follow-up Questions
- How do you read route parameters with ActivatedRoute?
- What is the difference between forRoot and forChild?
- How does lazy loading with loadChildren work?
- What are route guards and when do you use them?
- Why must the wildcard route come last?
MCQ Practice
1. Where does the Angular router render a matched component?
The router renders the component for the active route into the <router-outlet> element.
2. Which route pattern acts as a catch-all 404 fallback?
The '**' wildcard path matches any unmatched URL and should be placed last.
3. Which property enables lazy loading of a route's module?
loadChildren dynamically imports routes so their code loads only when the route is visited.
Flash Cards
What is the Angular router? — The navigation system that maps URL paths to components for single-page navigation without reloads.
How are routes configured? — As a Routes array of { path, component/loadChildren } objects passed to provideRouter or RouterModule.forRoot.
What does <router-outlet> do? — Marks where the router renders the component matched to the current URL.
Why is '**' placed last? — It's a wildcard catch-all; routes match in order, so it must come after all specific routes.