@angular/router
Version: Angular 21 (2025) Tags: Routing, Navigation, Guards, Lazy Loading, SPA
References: Docs — official routing guide • API • GitHub
API Changes
This section documents recent version-specific API changes.
- •
NEW: Functional guards and resolvers — Prefer functional approach over class-based guards source
- •
NEW: Router inputs — New way to pass data to components via route inputs source
- •
NEW: withComponentInputBinding — Enable component input binding from route params
- •
NEW: Router snapshots improvement — Better type safety for route parameters
- •
NEW: provideRouter() — Modern router configuration with functional providers
- •
DEPRECATED: RouterModule.forRoot() — Use provideRouter() in modern applications
Best Practices
- •Use lazy loading for feature modules — Reduce initial bundle size by 50-70%
ts
const routes: Routes = [
{
path: 'dashboard',
loadChildren: () => import('./dashboard/dashboard.routes').then(m => m.DASHBOARD_ROUTES)
}
];
- •Use functional guards over class-based guards
ts
// ✅ Modern functional guard
const authGuard = () => {
const authService = inject(AuthService);
const router = inject(Router);
if (authService.isAuthenticated()) {
return true;
}
return router.createUrlTree(['/login']);
};
// ❌ Avoid class-based guards for new code
// @Injectable() export class AuthGuard implements CanActivate { ... }
- •Use CanMatch guard for lazy-loaded routes — Prevents unauthorized code downloads
ts
{
path: 'admin',
canMatch: [authGuard],
loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)
}
- •Use resolvers for pre-fetching data — Eliminates loading spinners
ts
{
path: 'user/:id',
resolve: { user: userResolver }
}
// In component
@Component({})
export class UserComponent {
private route = inject(ActivatedRoute);
// Modern way
user = input.required<User>();
// Legacy way
ngOnInit() {
this.route.data.subscribe(data => {
this.user = data['user'];
});
}
}
- •Use router inputs for better type safety
ts
// app.config.ts
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes, withComponentInputBinding())
]
};
// Component receives route params as inputs
@Component({})
export class UserComponent {
@Input() id!: string;
}
- •Use wildcard routes for 404 pages
ts
{
path: '**',
component: NotFoundComponent
}
- •Use PreloadAllModules for background loading
ts
provideRouter(routes, withPreloading(PreloadAllModules))
- •Use routerLink for navigation — Maintains SPA behavior
ts
// ✅ Correct <a routerLink="/dashboard">Dashboard</a> // ❌ Wrong - causes full page reload <a href="/dashboard">Dashboard</a>
- •Use kebab-case for URL paths — Consistent naming convention
ts
// ✅ Good
{ path: 'user-profile', ... }
// ❌ Avoid
{ path: 'userProfile', ... }