Native async/await with polyfills file

[BenjaminHofstetter]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

My goal is to run a zoneless app without downleveling asynchronous/await. This is only true if I don't use a polyfills file.

Minimal Reproduction

Very minimal...

Just a minimal main.ts with just this async call with no polyfills file.

angular.json

            "polyfills": [],

window.setTimeout(async () => {
  const { body: readableStream } = await fetch('http://localhost:4200');
  if (!readableStream) {
    throw new Error('Failed to fetch');
  }
  console.log('hello Angular');
}, 0);

is transpiled to .... (checked in chrome dev tools source tab)

// src/main.ts
window.setTimeout(async () => {
    const {body: readableStream} = await fetch("http://localhost:4200");
    if (!readableStream) {
        throw new Error("Failed to fetch");
    }
    console.log("hello Angular");
}
, 0);

With a polyfills file in angular.json (the polyfills.ts file is empty) transpires to

angular.json

            "polyfills": [
                  "src/polyfills.ts"
              ],

var __getOwnPropNames = Object.getOwnPropertyNames;
var __commonJS = (cb, mod) => function __require() {
  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};

// src/main.ts
var require_main = __commonJS({
  "src/main.ts"(exports) {
    window.setTimeout(() => __async(exports, null, function* () {
      const { body: readableStream } = yield fetch("http://localhost:4200");
      if (!readableStream) {
        throw new Error("Failed to fetch");
      }
      console.log("hello Angular");
    }), 0);
  }
});
export default require_main();

Exception or Error

My expectation was that since zone.js is absent in the polifills, native async should not be downleveled. However, it seems that this is only the case when no polyfills files are added.

Your Environment

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.3
@angular-devkit/build-angular   19.2.3
@angular-devkit/core            19.2.3
@angular-devkit/schematics      19.2.3
@angular/cli                    19.2.3
@schematics/angular             19.2.3
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Anything else relevant?

No response

[alan-agius4]

This is the expected behavior when adding a file to the polyfills option rather than specifying polyfill package names (e.g., polyfills: ["npm-package-name"]).

[BenjaminHofstetter]

Is there a reason for this behavior?

[alan-agius4]

Not really, except that supporting it would require several changes to the internal build orchestration to check whether zone.js is included in the polyfills files. Currently, the application bundle and polyfills are built in parallel, but this change would require a sequential build process.

[BenjaminHofstetter]

Thank you for clarifying.

[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.}