Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@angular/router
Advanced tools
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.
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();
}
}
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 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 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.
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
18.1.0 (2024-07-10)
| Commit | Type | Description | | -- | -- | -- | | f25653e231 | fix | typo in NgOptimizedImage warning (#56756) | | 9b35726e42 | fix | typo in warning for NgOptimizedDirective (#56817) |
| Commit | Type | Description | | -- | -- | -- | | fd6cd0422d | feat | Add extended diagnostic to warn when there are uncalled functions in event bindings (#56295) | | 341a116d61 | fix | allow more characters in let declaration name (#56764) | | 2a1291e942 | fix | give precedence to local let declarations over parent ones (#56752) |
| Commit | Type | Description | | -- | -- | -- | | 66e582551e | fix | avoid duplicate diagnostics for let declarations read before definition (#56843) | | 4d18c5bfd5 | fix | flag all conflicts between let declarations and local symbols (#56752) | | 9e21582456 | fix | Show template syntax errors in local compilation modified (#55855) | | 5996502921 | fix | type check let declarations nested inside nodes (#56752) | | cdebf751e4 | fix | used before declared diagnostic not firing for control flow blocks (#56843) |
| Commit | Type | Description |
| -- | -- | -- |
| ea3c802056 | feat | Add a schematic to migrate afterRender phase flag (#55648) |
| 5df3e78c99 | feat | add equality function to rxjs-interop toSignal
(#56447) |
| 0a48d584f2 | feat | add support for let syntax (#56715) |
| 352e0782ec | feat | expose signal input metadata in ComponentMirror
(#56402) |
| a655e46447 | feat | Redesign the afterRender
& afterNextRender
phases API (#55648) |
| e5a6f91722 | feat | support TypeScript 5.5 (#56096) |
| 38effcc63e | fix | Add back phase flag option as a deprecated API (#55648) |
| 86bcfd3e49 | fix | improve docs on afterRender hooks (#56522) |
| b2445a0953 | fix | link errors to ADEV (#55554) (#56038) |
| 03a2acd2a3 | fix | properly remove imports in the afterRender phase migration (#56524) |
| 4d87b9e899 | fix | rename the equality function option in toSignal (#56769) (#56922) |
| 8bd4c074af | fix | toSignal equal option should be passed to inner computed (#56903) |
| Commit | Type | Description |
| -- | -- | -- |
| 00bde8b1c2 | fix | Make NgControlStatus
host bindings OnPush
compatible (#55720) |
| Commit | Type | Description |
| -- | -- | -- |
| cc21989132 | fix | Make Content-Type
header case insensitive (#56541) |
| Commit | Type | Description | | -- | -- | -- | | b400e2e4d4 | feat | autocompletion for the component not imported (#55595) | | 67b2c336bc | fix | import the default exported component correctly (#56432) |
| Commit | Type | Description |
| -- | -- | -- |
| a13f5da773 | feat | Allow UrlTree
as an input to routerLink
(#56265) |
| 1d3a7529b4 | feat | Set a different browser URL from the one for route matching (#53318) |
<a name="18.0.7"></a>
FAQs
Angular - the routing library
The npm package @angular/router receives a total of 2,343,399 weekly downloads. As such, @angular/router popularity was classified as popular.
We found that @angular/router demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.