Angular Router Basics
The Angular Router is a client-side navigation library that maps URL paths to components, letting you build a single-page application (SPA) that feels like a traditional multi-page site. Instead of the browser requesting a new HTML document from the server on every navigation, the router intercepts URL changes, matches them against a list of route definitions, and swaps out the components rendered inside a <router-outlet>. This preserves application state, avoids full page reloads, and lets you build rich transitions between views. In modern Angular (17+), routes are typically configured as a flat array of Routes objects and provided to the application via provideRouter() in a standalone bootstrapApplication() call, replacing the older RouterModule.forRoot() NgModule pattern.
Cricket analogy: Just as a stadium's giant screen swaps replays without the crowd leaving their seats, the Angular Router swaps components inside a router-outlet without the browser fetching a fresh page from the server, like Eden Gardens showing DRS reviews instantly.
Defining Routes
A route is an object with a path (the URL segment to match, without a leading slash) and either a component (for standalone components) or a loadComponent/loadChildren function for lazy loading. Routes are matched in array order, top to bottom, so more specific paths should generally be listed before more general ones like wildcard ** catch-alls. The empty string path '' matches the root of that route level, which is commonly used for a default/home view.
Cricket analogy: A route's path is like a fielding position such as gully assigned on the scorecard, matched in the order captains set the field, so a specific catching position must be listed before a generic sweeper else the sweeper claims every ball.
// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';
export const routes: Routes = [
{ path: '', component: HomeComponent, title: 'Home' },
{ path: 'about', component: AboutComponent, title: 'About Us' },
{ path: '**', component: NotFoundComponent, title: 'Page Not Found' },
];
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';
bootstrapApplication(AppComponent, {
providers: [provideRouter(routes)],
});The router-outlet and RouterLink
<router-outlet> is a placeholder directive that marks where the router should render the component matching the active route. A component template navigates between routes declaratively using the routerLink directive rather than plain <a href> tags, which avoids full-page reloads that href would otherwise trigger. routerLinkActive applies a CSS class automatically when a link's route is currently active, which is the standard way to highlight the current navigation item without manual state tracking.
Cricket analogy: router-outlet is like the stump camera slot that always shows whichever bowler is currently up, while routerLink is like a scorer clicking a player's name on the digital board instead of manually rewriting the scoreboard each over.
import { Component } from '@angular/core';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, RouterLink, RouterLinkActive],
template: `
<nav>
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
<a routerLink="/about" routerLinkActive="active">About</a>
</nav>
<router-outlet />
`,
})
export class AppComponent {}Unlike React Router, which is a third-party library with several competing versions and APIs, the Angular Router is a first-party, officially maintained package (@angular/router) that ships as part of the framework and is the de facto standard — there is no ecosystem fragmentation to navigate.
Programmatic Navigation
Beyond template-driven routerLink, you can navigate imperatively from component code by injecting the Router service (commonly via the inject() function) and calling router.navigate(['/path']) or router.navigateByUrl('/path'). This is essential after actions like form submission or authentication, where navigation should happen as a side effect of logic rather than a user clicking a link.
Cricket analogy: It's like a captain deciding to review a decision imperatively after a huddle with teammates rather than waiting for the batsman to signal, matching how router.navigate() fires programmatically after logic like a wicket review completes.
A common beginner mistake is forgetting that router.navigate() takes an array of path segments (a 'link parameters array'), e.g. router.navigate(['/users', userId]), not a single interpolated string. Passing a malformed array silently produces an incorrect URL rather than throwing a compile error.
- The Angular Router maps URL paths to components without triggering full page reloads.
- Routes are configured as a
Routesarray and registered withprovideRouter()inbootstrapApplication(). <router-outlet>is the placeholder where the matched route's component renders.- Use
routerLinkfor declarative navigation androuterLinkActiveto style the active link. - Inject the
Routerservice to navigate programmatically withnavigate()ornavigateByUrl(). - Route order matters — Angular matches top-down, so wildcard
**routes must come last.
Practice what you learned
1. Which function registers a `Routes` array with a standalone Angular application?
2. What happens if a route with path `**` is placed first in the routes array?
3. What is the purpose of `<router-outlet>`?
4. Which directive prevents a navigation link from causing a full browser page reload?
5. How does `router.navigate()` expect its primary argument to be formatted?
Was this page helpful?
You May Also Like
Route Parameters and Query Params
Understand how to pass dynamic data through the URL using required route parameters and optional query parameters, and how to read them reactively in a component.
Route Guards
Learn how functional route guards control navigation access — protecting routes behind authentication, confirming unsaved changes, and pre-fetching data before activation.
Lazy Loading Feature Routes
Discover how to split an Angular application into smaller JavaScript bundles that load on demand as users navigate, dramatically improving initial load performance.
Standalone Components and Bootstrapping
Understand how standalone components eliminate the need for NgModules, and how modern Angular applications bootstrap directly from a root component and providers array.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics