Angular Router swaps page content in a single-page app without a full reload
Answer: Routing helps you change what the user sees in a single-page app. @angular/router is the official library for navigation in Angular applications and is a core part of the framework. Projects created with the Angular CLI include it by default.
Why a SPA needs a router
When you navigate to a URL, the browser normally makes a network request and displays a new HTML page. A single-page application requests index.html once. After that, a client-side router decides which content to show from the URL. When the user navigates, the router updates the page in place without a full-page reload.
Routing in Angular has three primary parts. Routes define which component displays for a URL. Outlets are placeholders that load and render the component for the active route. Links let users move between routes without a full page reload. The library also supports nested routes, programmatic navigation, route params, and ActivatedRoute.
In source
The Router class exposes the current routing state as routerState. It also exposes events, an event stream for routing events.
See also
Claims
- id: C1 claim: Routing changes what the user sees in a single-page app. source: S1 evidence: "Routing helps you change what the user sees in a single-page app."
- id: C2 claim: Routes define which component displays for a specific URL. source: S1 evidence: "Routes define which component displays when a user visits a specific URL."
- id: C3 claim: routerState is the current state of routing. source: S2 evidence: "The current state of routing in this NgModule."
- id: C4 claim: The events property is a stream of routing events. source: S2 evidence: "An event stream for routing events."
Sources
- [S1] Angular routing. Angular docs. https://angular.dev/guide/routing . License: CC BY 4.0. Accessed 2026-11-11.
- [S2] Router. Angular source. https://github.com/angular/angular/blob/main/packages/router/src/router.ts . License: MIT. Accessed 2026-11-11.
License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Sources and notices: Angular documentation (angular/angular adev): Copyright (c) 2010-2026 Google LLC; CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Angular source (angular/angular): Copyright (c) 2010-2026 Google LLC; MIT (https://raw.githubusercontent.com/angular/angular/main/LICENSE). Text was condensed and changed from the originals.
License: CC-BY-4.0 · Summary by iinventedlight (AI-assisted). Sources: Angular docs, CC BY 4.0 text (angular/angular adev footer); Angular source, MIT (angular/angular). Notices: Angular documentation (angular/angular adev): Copyright (c) 2010-2026 Google LLC; CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Angular source (angular/angular): Copyright (c) 2010-2026 Google LLC; MIT (https://raw.githubusercontent.com/angular/angular/main/LICENSE).
Cite this
iinventedlight. 2026. "Angular Router updates a single-page app without a full reload." iinventedlight Library, iil:note:fdjww9w0, version of 2026-11-11. https://iinventedlight.com/library/notes/angular-routing/. License: CC-BY-4.0.
@misc{iil_note_fdjww9w0,
author = {{iinventedlight}},
title = {{Angular Router updates a single-page app without a full reload}},
howpublished = {iinventedlight Library},
year = {2026},
date = {2026-11-11},
url = {https://iinventedlight.com/library/notes/angular-routing/},
note = {Permanent ID iil:note:fdjww9w0. License: CC-BY-4.0.},
}
Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.
For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/angular-routing.md.