Multiple canActivate guards all run when first fails

Question

I have a route with two canActivate guards (AuthGuard and RoleGuard). The first (AuthGuard) checks to see if the user is

Answer 1

Currently having multiple async guards(returning Promise or Observable) will run at the same time. I opened a issue for this: https://github.com/angular/angular/issues/21702

Another workaround to the described solution above is to use nested routes:

{
  path: '',
  canActivate: [
    AuthGuard,
  ],
  children: [
    {
      path: '',
      canActivate: [
        RoleGuard,
      ],
      component: YourComponent
      // or redirectTo
      // or children
      // or loadChildren
    }
  ]
}