@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

17.0.0 (2023-11-08)

Blog post "Angular v17 is now available".

Breaking Changes

• Node.js v16 support has been removed and the minimum support version has been bumped to 18.13.0.

  Node.js v16 is planned to be End-of-Life on 2023-09-11. Angular will stop supporting Node.js v16 in Angular v17. For Node.js release schedule details, please see: https://github.com/nodejs/release#release-schedule

common

• the NgSwitch directive now defaults to the === equality operator, migrating from the previously used == operator. NgSwitch expressions and / or individual condition values need adjusting to this stricter equality check. The added warning message should help pin-pointing NgSwitch usages where adjustments are needed.

core

• Angular now requires zone.js version ~0.14.0

• Versions of TypeScript older than 5.2 are no longer supported.

• The mutate method was removed from the WritableSignal interface and completely dropped from the public API surface. As an alternative, please use the update method and make immutable changes to the object.

  Example before:

  items.mutate(itemsArray => itemsArray.push(newItem));
  

  Example after:

  items.update(itemsArray => [itemsArray, …newItem]);
  

• OnPush components that are created dynamically now only have their host bindings refreshed and ngDoCheck run during change detection if they are dirty. Previously, a bug in the change detection would result in the OnPush configuration of dynamically created components to be ignored when executing host bindings and the ngDoCheck function. This is rarely encountered but can happen if code has a handle on the ComponentRef instance and updates values read in the OnPush component template without then calling either markForCheck or detectChanges on that component's ChangeDetectorRef.

platform-browser

• REMOVE_STYLES_ON_COMPONENT_DESTROY default value is now true. This causes CSS of components to be removed from the DOM when destroyed. You retain the previous behaviour by providing the REMOVE_STYLES_ON_COMPONENT_DESTROY injection token.

  import {REMOVE_STYLES_ON_COMPONENT_DESTROY} from '@angular/platform-browser';
  ...
  providers: [{
    provide: REMOVE_STYLES_ON_COMPONENT_DESTROY,
    useValue: false,
  }]
  

• The withNoDomReuse() function was removed from the public API. If you need to disable hydration, you can exclude the provideClientHydration() call from provider list in your application (which would disable hydration features for the entire application) or use ngSkipHydration attribute to disable hydration for particular components. See this guide for additional information: https://angular.io/guide/hydration#how-to-skip-hydration-for-particular-components.

router

• Absolute redirects no longer prevent further redirects. Route configurations may need to be adjusted to prevent infinite redirects where additional redirects were previously ignored after an absolute redirect occurred.

• Routes with loadComponent would incorrectly cause child routes to inherit their data by default. The default paramsInheritanceStrategy is emptyOnly. If parent data should be inherited in child routes, this should be manually set to always.

• urlHandlingStrategy has been removed from the Router public API. This should instead be configured through the provideRouter or RouterModule.forRoot APIs.

• The following Router properties have been removed from the public API:

  • canceledNavigationResolution
  • paramsInheritanceStrategy
  • titleStrategy
  • urlUpdateStrategy
  • malformedUriErrorHandler

  These should instead be configured through the provideRouter or RouterModule.forRoot APIs.

• The setupTestingRouter function has been removed. Use RouterModule.forRoot or provideRouter to setup the Router for tests instead.

• malformedUriErrorHandler is no longer available in the RouterModule.forRoot options. URL parsing errors should instead be handled in the UrlSerializer.parse method.