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.
19.0.0-next.0 (2024-08-14)
Breaking Changes
core
-
Errors that are thrown during ApplicationRef.tick
will now be rethrown when using TestBed
. These errors should be
resolved by ensuring the test environment is set up correctly to
complete change detection successfully. There are two alternatives to
catch the errors:
- Instead of waiting for automatic change detection to happen, trigger
it synchronously and expect the error. For example, a jasmine test
could write
expect(() => TestBed.inject(ApplicationRef).tick()).toThrow()
TestBed
will reject any outstanding ComponentFixture.whenStable
promises. A jasmine test,
for example, could write expectAsync(fixture.whenStable()).toBeRejected()
.
As a last resort, you can configure errors to not be rethrown by
setting rethrowApplicationErrors
to false
in TestBed.configureTestingModule
.
router
- The
Router.errorHandler
property has been removed.
Adding an error handler should be configured in either
withNavigationErrorHandler
with provideRouter
or the errorHandler
property in the extra options of RouterModule.forRoot
. In addition,
the error handler cannot be used to change the return value of the
router navigation promise or prevent it from rejecting. Instead, if you
want to prevent the promise from rejecting, use resolveNavigationPromiseOnError
. - The return type of the
Resolve
interface now includes
RedirectCommand
.
core
| Commit | Type | Description |
| -- | -- | -- |
| 468d3fb9b1 | fix | rethrow errors during ApplicationRef.tick in TestBed (#57200) |
router
| Commit | Type | Description |
| -- | -- | -- |
| f271021e19 | feat | Add routerOutletData
input to RouterOutlet
directive (#57051) |
| b2790813a6 | fix | Align RouterModule.forRoot errorHandler with provider error handler (#57050) |
| 7436d3180e | fix | Update Resolve interface to include RedirectCommand like ResolveFn (#57309) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="18.2.0"></a>