Zone.js unexpected promise callbacks execution order

[bcaudan]

Which @angular/* package(s) are the source of the bug?

zone.js

Is this a regression?

No

Description

The execution order of promise callbacks is not consistent with native behaviour when:

• the promise is created from the fetch api
• async/await and promise are mixed

(async function () {
  const promise = fetch('/');
  promise.then(() => console.log('called first'));
  await promise;
  console.log('called last');
})();

Expected output (same as native):

called first
called last

Actual output:

called last
called first

By using Promise.resolve instead of fetch, it behaves as expected.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/zone-playground-vgkwya?file=index.ts

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

cf minimal reproduction, observed with zone.js 0.12.0

Anything else?

Additional explorations: https://stackblitz.com/edit/zone-playground-ddx3mw?file=index.ts

[JeanMeche]

Why are you expecting an execution order when there is none written in your code ?

[bcaudan]

I would expect first registered callback to be executed first.

[JeanMeche]

By the way, this is not directly caused by zone.js. Setting the target to ES2016 removes this behaviour.

When using target ES2017+ tsc doesn't transform the async/await to a generator any since it's has native support. Some other tool is doing it (Is it @babel/plugin-transform-async-to-generator ?) , since zone.js can't work with native async/await, see #31730.

[alxhub]

As @JeanMeche says, this is not behavior that zone.js changes but rather the different behavior of downleveling approaches for async/await. I would suggest filing this issue with @babel/plugin-transform-async-to-generator - I'm not sure what guarantees they intend to make regarding interleaving their downleveling with native promises.

[bcaudan]

Setting the target to ES2016 removes this behaviour.

Added a tsconfig to the example to play with that and indeed, setting the target to ES2016 removes this behaviour.

As @JeanMeche says, this is not behavior that zone.js changes but rather the different behavior of downleveling approaches for async/await. I would suggest filing this issue with @babel/plugin-transform-async-to-generator

I don't follow you here, in case anything was happening under the hood with stackblitz, I have created a simpler reproduction: https://datadoghq.dev/browser-sdk-test-playground/callback-order/with-zone.html

I still have this behaviour without any tool downleveling async/await, am I missing something?

By using Promise.resolve instead of fetch, it behaves as expected

Any insight on why it seems specific to fetch?

[bcaudan]

@JeanMeche @alxhub?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}