Router life cycle

Let’s look at the working of an Angular Router. The very first and foremost task of an Angular Router is to navigate to the configured routes for the components which are routable. So the components of a route are configured as the route configurations and these configurations are known as Router states. Once these states are configured, the Angular router will render this set of components and bring the change in the browser URL. This will also require the router outlet to be present on the template, as a placeholder for placing the template view on that page.

And this is why the first step when working with Angular routing is to import the RouterModule inside your application. The next step is to configure the router states that form a tree of the router states. To do this, the routes are configured inside the routermodule.forRoot() method.

In the next lesson, on setting up a routing application, you will see the different ways of using routermodule.forRoot().

At a given point in time, there will be one running route called the active route.

Whenever the routed path changes, it brings a change in the URL of the browser and the activated route also changes. In further lessons, you will also see how the order of paths in the route configuration, also called route state tree, matters a lot. It follows the depth-first search algorithm and matches the first route path with the entire URL.

Once the configuration of the routes is covered, we go on to see how the Angular Router navigates from one route to another.

The life cycle of a router

To understand this better, let’s understand the Router Lifecycle first.

• Apply the redirects
• Match the router state URL
• Activate the guards
• Activate the Resolvers
• Activate the final view on the template using Router-Outlet