@angular/router

What is @angular/router?

The @angular/router package provides navigation and URL manipulation capabilities for Angular applications. It allows developers to define routes, navigate between them, handle route parameters, and guard routes among other functionalities.

What are @angular/router's main functionalities?

Route Configuration

Defines routes in an Angular application, associating paths with components.

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Router Outlet

A placeholder that Angular dynamically fills based on the current router state.

<router-outlet></router-outlet>

Navigation

Programmatically navigate to different routes within an Angular application.

constructor(private router: Router) { }

navigateToHome() {
  this.router.navigate(['/home']);
}

Route Parameters

Access parameters for a given route, often used for fetching data based on the URL.

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.userId = params.get('id');
  });
}

Route Guards

Protect routes with guards that can allow or prevent navigation to a route based on logic such as authentication.

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.isAuthenticated();
  }
}

Other packages similar to @angular/router

react-router

React Router is a routing library for React, similar to @angular/router but for React applications. It provides components for navigation, route matching, and history handling. While @angular/router is designed specifically for Angular, React Router is tailored to React's component structure.

vue-router

Vue Router is the official router for Vue.js. It integrates deeply with Vue.js core to make building Single Page Applications with Vue.js a breeze. It offers features similar to @angular/router but is designed to work seamlessly with Vue.js components and reactivity system.

reach-router

Reach Router is a small, simple router for React that is accessible and easy to use. It is similar to @angular/router in providing navigation and route matching, but it focuses on simplicity and accessibility. It has now been succeeded by React Router, which has incorporated its accessibility features.

README

Angular

The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.

Usage information and reference details can be found in Angular documentation.

License: MIT

Changelog

20.0.0-rc.2 (2025-05-21)

Deprecations

platform-browser

• All entries of the @angular/platform-browser-dynamic

Breaking Changes

core

• Resource.value() now returns a default value when in a loading state after reloading the error state
• Resource.value() now throws an error when it's in an error state. Previously it returned undefined.
• Resource.error now has a type of Signal<Error | undefined> instead of Signal<unknown>
• Resource.reload has been moved to WritableResource.reload.

common

| Commit | Type | Description | | -- | -- | -- | | af7881abac | fix | cancel reader when app is destroyed (#61528) | | 966df84351 | fix | prevent reading chunks if app is destroyed (#61354) |

compiler

| Commit | Type | Description | | -- | -- | -- | | e74266b108 | fix | avoid conflicts between HMR code and local symbols (#61550) |

compiler-cli

| Commit | Type | Description | | -- | -- | -- | | b57084267e | fix | Always retain prior results for all files (#61487) | | 7a3a41f33f | fix | avoid ECMAScript private field metadata emit (#61227) |

core

| Commit | Type | Description | | -- | -- | -- | | 7efb3384a7 | fix | cleanup rxResource abort listener (#58306) | | b90160d10a | fix | cleanup testability subscriptions (#61261) | | 3ba39bc28f | fix | getting resource value throws an error instead of returning undefined (#61441) | | ca6295e90b | fix | handle different DI token types in Chrome DevTools integration (#61333) | | d62379bb13 | fix | move reload method from Resource to WritableResource (#61441) | | a89f1cff24 | fix | narrow error type for resources API (#61441) | | 6e79eaf739 | fix | reading resource value after reload in the error state (#61441) | | 350776b412 | fix | TestBed.tick should ensure test components are synchronized (#61382) | | 648d42fe65 | fix | Testing should not throw when Zone does not patch test FW APIs (#61376) | | 5dbeb42308 | fix | unregister onDestroy in toSignal. (#61514) | | 30e081287d | fix | update min Node.js support to 20.19, 22.12, and 24.0 (#61500) |

platform-browser

| Commit | Type | Description | | -- | -- | -- | | bc2cab747f | refactor | Deprecate the platform-browser-dynamic package (#61043) |

platform-server

| Commit | Type | Description | | -- | -- | -- | | 6d8e57d131 | perf | speed up resolution of base (#61392) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="19.2.12"></a>