Execute Multiple Asynchronous Route Guards in Order

I know angular route guards execute in the specified order when the canActivate function returns a simple boolean, however, what if the guards return type Observable<boolean> or Promise<boolean>?

Example in route:

{
path: 'confirm',
canActivate: [AuthGuard, SessionExpiredAuthGuard, CheckoutAuthGuard],
component: CheckoutReviewOrderComponent
},


SessionExpiredAuthGuard and CheckoutAuthGuard both return type Observable<boolean>. I don't want the CheckoutAuthGuard to be executed before the SessionExpiredAuthGuard is finished retrieving it's data from the asynchronous http request.

Is there any way to force these asynchronous guards to execute in order?

Continue reading...