Router Lifecycle and Events
Angular Router emits events through the Router.events observable, allowing you to track the navigation lifecycle from start to finish.
Common Router Events (Chronological)
NavigationStart: Navigation begins.RoutesRecognized: Router matches the URL to a route.GuardsCheckStart/End: Evaluation ofcanActivate,canMatch, etc.ResolveStart/End: Data resolution phase (fetching data via resolvers).NavigationEnd: Navigation completed successfully.NavigationCancel: Navigation canceled (e.g., guard returnedfalse).NavigationError: Navigation failed (e.g., error in resolver).
Subscribing to Events
Inject the Router and filter the events observable.
import {Router, NavigationStart, NavigationEnd} from '@angular/router';
export class MyService {
private router = inject(Router);
constructor() {
this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((event) => {
console.log('Navigated to:', event.url);
});
}
}
Debugging
Enable detailed console logging of all routing events during application bootstrap.
provideRouter(routes, withDebugTracing());
Common Use Cases
- Loading Indicators: Show a spinner when
NavigationStartfires and hide it onNavigationEnd/Cancel/Error. - Analytics: Track page views by listening for
NavigationEnd. - Scroll Management: Respond to
Scrollevents for custom scroll behavior.