Angular Router Events Lifecycle

Have you ever wondered what happens when you hit a link in an Angular application? Well this is just the right article for you. In Angular, the router is an essential component that is responsible for managing the application's navigation. It helps to navigate between different components of the application and keep the application in sync with the current URL. The router emits several events at different stages of the routing process, which allow you to track the lifecycle of the router and perform actions or modify the behavior of the router.

The sequence in which router events occur is as follows:
.NavigationStart
.RouteConfigLoadStart
.RouteConfigLoadEnd
.RoutesRecognized
.GuardsCheckStart
.ChildActivationStart
.ActivationStart
.GuardsCheckEnd
.ResolveStart
.ResolveEnd
.ActivationEnd
.ChildActivationEnd
.NavigationEnd
.NavigationCancel
.NavigationError
.Scroll

I know what your thinking "Whoa!! That's a lot". Do not worry we'll go through each and everyone for better comprehension.

NavigationStart
This event is emitted when a new navigation is initiated. This event can be used to set a loading indicator or display a message to the user indicating that the application is navigating to a new route. For example:

import { Router, NavigationStart } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationStart) {
      // Show a loading indicator or display a message
    }
  });
}

RouteConfigLoadStart
This event is emitted when the router begins to load a route configuration. This event can be used to display a loading indicator or perform other tasks while the route configuration is being loaded. For example:

import { Router, RouteConfigLoadStart } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof RouteConfigLoadStart) {
      // Show a loading indicator or perform other tasks
    }
  });
}

RouteConfigLoadEnd
When the router finishes loading a route configuration, it emits the RouteConfigLoadEnd event. This event can be used to hide a loading indicator or perform other tasks after the route configuration has been loaded. For example:

import { Router, RouteConfigLoadEnd } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof RouteConfigLoadEnd) {
      // Hide a loading indicator or perform other tasks
    }
  });
}

RoutesRecognized
This event is emitted when the router recognizes a route change. It marks the beginning of the route recognition process and can be used to perform tasks before the router begins to update the route. If the matched path requires a lazy loaded module, it will be loaded at this point.

Lazy loading is a technique that allows you to load modules or components on demand, rather than loading them upfront. This can help to improve the performance of your Angular application, especially if it is a large application with many components.

import { Router, RoutesRecognized } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof RoutesRecognized) {
      // Perform tasks before the router begins to update the route
    }
  });
}

GuardsCheckStart
The GuardsCheckStart event is emitted when the router starts running route guards. Route guards are functions that can be used to protect access to a route or to modify the behavior of the router. They are run before the router activates a route and can prevent the router from navigating to the route if necessary. For example:

import { Router, GuardsCheckStart } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof GuardsCheckStart) {
      // Perform tasks before route guards are run
    }
  });
}

ChildActivationStart
The ChildActivationStart event is emitted when the router starts activating a child route. It can be used to perform tasks before a child route is activated.

import { Router, ChildActivationStart } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof ChildActivationStart) {
      // Perform tasks before a child route is activated
    }
  });
}

ActivationStart
This event is emitted when the router starts activating a route. It can be used to perform tasks before a route is activated.

import { Router, ActivationStart } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof ActivationStart) {
      // Perform tasks before a route is activated
    }
  });
}

GuardsCheckEnd
Finally the GuardsCheckEnd event is emitted when the router finishes running route guards. It can be used to perform tasks after route guards have been run

import { Router, GuardsCheckEnd } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof GuardsCheckEnd) {
      // Perform tasks after route guards have been run
    }
  });
}

Once the guard has passed, the router has answered its second question, “Should I perform this navigation?”. The router can now prefetch any data using route resolvers.

ResolveStart
The ResolveStart event is emitted when the router starts running route resolvers. Route resolvers are functions that can be used to pre-fetch data for a route. They are run before the route is activated and can be used to ensure that the route has all the necessary data when it is displayed to the user. Foe example;

import { Router, ResolveStart } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof ResolveStart) {
      // Perform tasks before route resolvers are run
    }
  });
}

ResolveEnd
The ResolveEnd event is emitted when the router finishes running route resolvers. It can be used to perform tasks after route resolvers have been run.

import { Router, ResolveEnd } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof ResolveEnd) {
      // Perform tasks after route resolvers have been run
    }
  });
}

ActivationEnd
The ActivationEnd event is emitted when the router finishes activating a route. It can be used to perform tasks after a route has been activated.

import { Router, ActivationEnd } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof ActivationEnd) {
      // Perform tasks after a route has been activated
    }
  });
}

ChildActivationEnd
The ChildActivationEnd event is emitted when the router finishes activating a child route. It can be used to perform tasks after a child route has been activated.

import { Router, ChildActivationEnd } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof ChildActivationEnd) {
      // Perform tasks after a child route has been activated
    }
  });
}

NavigationEnd
The NavigationEnd event is emitted when the navigation is complete. It can be used to update the application's state or perform other tasks after the navigation has completed.

import { Router, NavigationEnd } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      // Update the application's state or perform other tasks
    }
  });
}

NavigationCancel
If the navigation is cancelled, the router emits the NavigationCancel event. This can happen if the router is unable to match the current URL to a route or if the navigation is explicitly cancelled by calling the router.navigate() method with the cancel option set to true.

import { Router, NavigationCancel } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationCancel) {
      // Perform tasks in response to the navigation being cancelled
    }
  });
}

NavigationError
If an error occurs during the navigation process, the router emits the NavigationError event. This event can be used to display an error message or perform other tasks when an error occurs.

import { Router, NavigationError } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationError) {
      // Display an error message or perform other tasks
    }
  });
}

And the final event...

Scroll
The Scroll event is emitted when the router navigates to a new route and the browser's scroll position needs to be reset. This event can be used to adjust the scroll position of the page or perform other tasks when the scroll position is reset.

import { Router, Scroll } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof Scroll) {
      // Adjust the scroll position or perform other tasks
    }
  });
}

You can also specify the scroll position for a route by using the scrollPosition option in the router.navigate() method. For example:

this.router.navigate(['/route'], { scrollPosition: [0, 0] });

This will reset the scroll position to the top-left corner of the page when navigating to the /route route.

A great way to see the navigation cycle is by subscribing to the Router service’s events observable:

constructor(private router: Router) {
  this.router.events.subscribe( (event: RouterEvent) => console.log(event))
}

Then also pass along an option of enableTracing: true in the router configuration.

RouterModule.forRoot(ROUTES, {
  enableTracing: true
})

In the developer console, we can see the events emitted during navigation

That's it! I hope this was helpful.