@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.

License: MIT

Changelog

14.2.0 (2022-08-25)

animations

| Commit | Type | Description | | -- | -- | -- | | b96e571897 | fix | fix stagger timing not handling params (#47208) |

common

| Commit | Type | Description | | -- | -- | -- | | b380fdd59e | feat | add a density cap for image srcsets (#47082) | | 7ce497e5bc | feat | add built-in Imgix loader (#47082) | | bff870db61 | feat | add cloudflare loader (#47082) | | 86e77a5d55 | feat | add Image directive skeleton (#45627) (#47082) | | 0566205a02 | feat | Add image lazy loading and fetchpriority (#47082) | | 4e952ba216 | feat | add loaders for cloudinary & imagekit (#47082) | | e854a8cdde | feat | add loading attr to NgOptimizedImage (#47082) | | 8d3701cb4c | feat | add warnings re: image distortion (#47082) | | d5f7da2120 | feat | define public API surface for NgOptimizedImage directive (#47082) | | d3c3426aa4 | feat | detect LCP images in NgOptimizedImage and assert if priority is set (#47082) | | 451b85ca17 | feat | explain why width/height is required (#47082) | | 586274fe65 | feat | provide an ability to exclude origins from preconnect checks in NgOptimizedImage (#47082) | | 57f3386e5b | feat | support custom srcset attributes in NgOptimizedImage (#47082) | | 7baf9a46cd | feat | verify that priority images have preconnect links (#47082) | | f81765b333 | feat | warn if rendered size is much smaller than intrinsic (#47082) | | e2ab99b95e | fix | allow null/undefined to be passed to ngClass input (#39280) (#46906) | | bedf537951 | fix | allow null/undefined to be passed to ngStyle input (#47069) | | f9511bf6e8 | fix | avoid interacting with a destroyed injector (#47243) | | dc29e21b14 | fix | consider density descriptors with multiple digits as valid (#47230) | | 801daf82d1 | fix | detect data: and blob: inputs in NgOptimizedImage directive (#47082) | | fff8056e7f | fix | fix formatting on oversized image error (#47188) (#47232) | | 1ca2ce19ab | fix | remove default for image width (#47082) | | c5db867ddc | fix | remove duplicate deepForEach (#47189) | | 1cf43deb18 | fix | sanitize rawSrc and rawSrcset values in NgOptimizedImage directive (#47082) | | d71dfe931f | fix | set bound width and height onto host element (#47082) | | 32caa8b669 | fix | support density descriptors with 2+ decimals (#47197) (#47232) | | ae4405f0bf | fix | throw if srcset is used with rawSrc (#47082) | | 0c8eb8bc82 | perf | monitor LCP only for images without priority attribute (#47082) |

compiler-cli

| Commit | Type | Description | | -- | -- | -- | | ea89677c12 | feat | support more recent version of tsickle (#47018) |

core

| Commit | Type | Description | | -- | -- | -- | | d1e83e1b30 | feat | add createComponent function (#46685) | | 10becab70e | feat | add reflectComponentType function (#46685) | | 4b377d3a6d | feat | introduce createApplication API (#46475) | | 31429eaccc | feat | support TypeScript 4.8 (#47038) | | 796840209c | fix | align TestBed interfaces and implementation (#46635) |

forms

| Commit | Type | Description | | -- | -- | -- | | 426af91a42 | feat | add FormBuilder.record() method (#46485) | | b302797de4 | fix | Correctly infer FormBuilder types involving [value, validators] shorthand in more cases. (#47034) |

language-service

| Commit | Type | Description | | -- | -- | -- | | 598b72bd05 | feat | support fix the component missing member (#46764) |

platform-browser

| Commit | Type | Description | | -- | -- | -- | | 07606e3181 | feat | add isEmpty method to the TransferState class (#46915) |

platform-server

| Commit | Type | Description | | -- | -- | -- | | 2b4d7f6733 | feat | support document reference in render functions (#47032) |

router

| Commit | Type | Description | | -- | -- | -- | | 0abb67af59 | feat | allow guards and resolvers to be plain functions (#46684) | | 75df404467 | feat | Create APIs for using Router without RouterModule (#47010) | | 10289f1f6e | feat | expose resolved route title (#46826) | | 8600732b09 | feat | Expose the default matcher for Routes used by the Router (#46913) | | 422323cee0 | feat | improve typings for RouterLink boolean inputs (#47101) | | 26ea97688c | feat | Make router directives standalone (#46758) | | 2a43beec15 | fix | Fix route recognition behavior with some versions of rxjs (#47098) |

service-worker

| Commit | Type | Description | | -- | -- | -- | | 383090858c | feat | support sendRequest as a notificationclick action (#46912) | | 3f548610dd | fix | export NoNewVersionDetectedEvent (#47044) | | 482b6119c2 | fix | update golden index.md (#47044) |

Special Thanks

Alex Rickabaugh, Andrew Kushnir, Andrew Scott, Bob Watson, Cédric Exbrayat, Dylan Hunn, Emmanuel Roux, FatalMerlin, George Kalpakas, Ilia Mirkin, Jan Kuehle, Jeremy Elbourn, Jessica Janiuk, JiaLiPassion, Kalbarczyk, Kara Erickson, Katie Hempenius, Kristiyan Kostadinov, Merlin, Paul Gschwendtner, Pawel Kozlowski, Tristan Sprößer, Victor Porof, angular-robot[bot], dario-piotrowicz, ivanwonder and vyom

<!-- CHANGELOG SPLIT MARKER -->

<a name="14.1.3"></a>