Angular Router Events Lifecycle
Tags: angular, programming
Published: 2023-01-07 20:17:27

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.