Guards Execution Order in Angular
This article lists [visual & simplified] content to help you learn and also remember guards execution order in Angular.
Click here -> ONLINE DEMO <- if you want to try things listed below and more by yourself.
Basic route structure we are working with for the scenarios 1 and 2.
Scenario 01
Navigate to route ‘pageV’ when all guards return True.
output:
[Tip 1]
If any guard returns false, navigation is cancelled. If any guard returns a UrlTree, current navigation is cancelled and a new navigation (redirect) starts to the UrlTree returned from the guard.
[Tip 2]
Notice the runGuardsAndResolers that can have other values and alter how the guards and resolvers execution is done on each routing. Official documentation HERE.
[Tip 3]
Resolverof parent route run after canActivate(parent), canActivateChild (parent) and canActivate(child route) .
Scenario 02
Navigate to route ‘pageV’ when CanActivateAguard return False.
output:
[Tip 4]
All guards CanActivate run from the parent route even if the first one will eventually fail and any later guards of course won’t run.
~ ~ ~
Basic route structure we are working with for the scenario 3.
Scenario 03
Navigate to route ‘lazy’ when all guards return True.
Lazy loading => CanLoadvs CanActivate
Output: both execute
[Tip 5]
Good answer here to know where to use one or the other depending of your final wish.
You found this post helpful! give it some 👏👏👏.
Thank you
