Async guards should have the option to wait for previous guards to finish

This is a copy of #21702 which has been locked due to inactivity. Still it is relevant.

I'm submitting a...

[ ] Regression
[ ] Bug report
[X] Feature request
[ ] Documentation issue or request
[ ] Support request

Current behavior

When having multiple async guards (returning promise or observable) for the same path they execute at the same time:

{
  path: '',
  canActivate: [
        AuthGuard,
        DetectLanguage,
        GetAppData,
  ],
  children: [ ... ]
}

Expected behavior

There should be an option to let them execute synchronous:

• guard[i+1] should wait for guard[i] to finish
• If guard[i] returns false all following guards should not execute

What is the motivation / use case for changing the behavior?

The example above has an authentication which needs to be done first before getting the app data. AuthGuard returns a token that needs to be used within GetAppData. Currently GetAppData runs immediatly without having a token.

Workaround

Kinda ugly and confusing workaround:

{
      path: '',
      canActivate: [
         AuthGuard,
      ],
      children: [
        {
          path: '',
          canActivate: [
             DetectLanguage,
          ],
          children: [
             {
                path: '',
                canActivate: [
                    GetAppdata,
                ],
                component: MyComponent,
             }
         }
      ]
    }