What is Guard? Guards make sure that the application user with the access permission can access that particular area in the application. It is mainly used to protect routes.
CanActivate - this guard helps decide whether a route can be activated or not.
CanActivateChild - this guard helps to decide whether children routes of a route can be activated or not.
CanDeactivate - this guard helps decide whether a route can be deactivated or not.
CanLoad - this guard helps decide whether a module can be loaded lazily or not
Guards can be implemented in different ways, but after all it really boils down to a function that returns either Observable<boolean>, Promise<boolean> or boolean. In addition, guards are registered using providers, so they can be injected by Angular when needed.
To register a guard we need to define a token and the guard function. Here’s what a super simple guard implementation could look like: