Angular Route Guards

Route Guards are special validation checks which can be used to validate requests to load specific routes/modules, we can validate the request and either accept or deny the request to load the route. Route guards return a true/false value which decides where the user can access the route or not.

There are 5 route guards

CanActivate

CanActivateChild

CanDeactivate

CanLoad

Resolve

The CanActivate route guard gets executed before any route request is executed, this guard is often used to validate user login / token etc.

The CanActivateChild route guard is similar to the CanActivate guard, the difference is that this will get executed before any child route request is executed.

The CanDeactivate guard gets executed before a route is deactivated, this guard is often used to get confirmation message from the users before we unload a view / route, something like “You are about to leave this page, do you want to save your changes before you leave?”, based on the users response we can perform some operations before unloading the route.

The CanLoad guard gets executed before a module is loaded, the CanActivate guard validates navigate to a route while CanLoad validates navigation to a feature.

The Resolve guard is used to fetch data before a route is activated, this helps improve user experience by pre-loading data so that the user doesn’t have to wait for data loading after the route is activated.