Skip to content

Polyfills are improperly inlined and execute in the wrong order #32632

@austinw-fineart

Description

@austinw-fineart

Command

serve

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

19.2.0

Description

I encountered this bug while migrating a project with zone flags set but I'm aware that zoneless is a thing now so maybe less people will have hit it as a result. However, this bug can be generalized to any polyfill scripts requiring a certain order. Given the following setup:

// angular.json
"polyfills": [
  "src/zone-flags.js",
  "zone.js"
],
// src/zone-flags.js
globalThis.__Zone_disable_ZoneAwarePromise = true;

When serving the project and inspecting the source, this is what you'd see in Angular 19:

// src/zone-flags.js
globalThis.__Zone_disable_ZoneAwarePromise = true;

// node_modules/.pnpm/zone.js@0.16.1/node_modules/zone.js/fesm2015/zone.js
var __defProp = Object.defineProperty;
...

Starting in Angular 20, you'd see this instead:

// src/zone-flags.js
globalThis.__Zone_disable_ZoneAwarePromise = true;

// angular:polyfills:angular:polyfills
import "/@fs/D:/New folder/org2/.angular/cache/21.2.0/org/vite/deps/zone__js.js?v=e512eaef";

For anyone unfamiliar with ESM import behavior, they are always the first to execute regardless of statements that come before them. Ergo, the zone.js script will run before the flags are set, thus rendering the flags useless and breaking the polyfill ordering.

Note that this only affects the dev server; when building, the polyfills are compiled into one script. I have not checked if this change in the dev server extends beyond the polyfill scripts, i.e. imports being inlined in application code. I'm aware that the dev server is powered by Vite but I do not know enough about this implementation to file a bug on Angular's behalf.

Minimal Reproduction

This won't reproduce on StackBlitz so you'll have to run the commands yourself.

  1. ng new --zoneless false
  2. Create new file zone-flags.js
  3. Add zone-flags.js before zone.js in angular.json polyfills
  4. ng serve
  5. Check if Promise is patched in browser F12 console

Exception or Error


Your Environment

Angular CLI       : 21.2.0
Node.js           : 24.14.0
Package Manager   : npm 11.11.0
Operating System  : win32 x64

Anything else relevant?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions