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.
17.2.0 (2024-02-14)
common
| Commit | Type | Description |
| -- | -- | -- |
| 03c3b3eb79 | feat | add Netlify image loader (#54311) |
| f5c520b836 | feat | add placeholder to NgOptimizedImage (#53783) |
compiler
| Commit | Type | Description |
| -- | -- | -- |
| 47e6e84101 | feat | Add a TSConfig option useTemplatePipeline
(#54057) |
| 66e940aebf | feat | scope selectors in @starting-style (#53943) |
| 7b4d275f49 | fix | Fix the template pipeline option (#54148) |
compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| 7e861c640e | feat | generate extra imports for component local dependencies in local mode (#53543) |
| 3263df23f2 | feat | generate global imports in local compilation mode (#53543) |
| b774e22d8e | feat | make it configurable to generate alias reexports (#53937) |
| 3e1384048e | feat | support host directives for local compilation mode (#53877) |
| a592904c69 | fix | allow custom/duplicate decorators for @Injectable
classes in local compilation mode (#54139) |
| 4b1d948b36 | fix | consider the case of duplicate Angular decorators in local compilation diagnostics (#54139) |
| 96bcf4fb12 | fix | forbid custom/duplicate decorator when option forbidOrphanComponents
is set (#54139) |
| 64fa5715c6 | fix | generating extra imports in local compilation mode when cycle is introduced (#53543) |
| 6c8b09468a | fix | highlight the unresolved element in the @Component.styles array for the error LOCAL_COMPILATION_UNRESOLVED_CONST (#54230) |
| 0970129e20 | fix | show proper error for custom decorators in local compilation mode (#53983) |
| f39cb06418 | fix | show specific error for unresolved @Directive.exportAs in local compilation mode (#54230) |
| f3851b5945 | fix | show specific error for unresolved @HostBinding's argument in local compilation mode (#54230) |
| 39ddd884e8 | fix | show specific error for unresolved @HostListener's event name in local compilation mode (#54230) |
| 5d633240fd | fix | show the correct message for the error LOCAL_COMPILATION_UNRESOLVED_CONST when an unresolved symbol used for @Component.styles (#54230) |
| 58b8a232d6 | fix | support jumping to definitions of signal-based inputs (#54053) |
core
| Commit | Type | Description |
| -- | -- | -- |
| 702ab28b4c | feat | add support for model inputs (#54252) |
| e95ef2cbc6 | feat | expose queries as signals (#54283) |
| 656bc282e3 | fix | add toString implementation to signals (#54002) |
| 62b87b4551 | fix | do not crash for signal query that does not have any matches (#54353) |
| 4b96f370ee | fix | expose model signal subcribe for type checking purposes (#54357) |
| 744cb1e561 | fix | return the same children query results if there are no changes (#54392) |
| 6d00115bf4 | fix | show placeholder block on the server with immediate trigger (#54394) |
http
| Commit | Type | Description |
| -- | -- | -- |
| 1c536250b6 | fix | Use string body to generate transfer cache key. (#54379) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.1.3"></a>