prebundle import ordering issue

[HazzMan2409]

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

19 or 20

Description

In your application, if you do the following:

import "./my-zone-flags";
import "zone.js";

zone.js runs before my-zone-flags.

This only occurs when prebundling is on.

Minimal Reproduction

https://github.com/HazzMan2409/prebundle-order-issue

Exception or Error

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI       : 21.2.0
Angular           : 21.2.0
Node.js           : 22.17.1
Package Manager   : npm 10.9.2
Operating System  : darwin arm64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 21.2.0            │ ^21.2.0           │
│ @angular/cli              │ 21.2.0            │ ^21.2.0           │
│ @angular/common           │ 21.2.0            │ ^21.2.0           │
│ @angular/compiler         │ 21.2.0            │ ^21.2.0           │
│ @angular/compiler-cli     │ 21.2.0            │ ^21.2.0           │
│ @angular/core             │ 21.2.0            │ ^21.2.0           │
│ @angular/forms            │ 21.2.0            │ ^21.2.0           │
│ @angular/platform-browser │ 21.2.0            │ ^21.2.0           │
│ @angular/router           │ 21.2.0            │ ^21.2.0           │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 5.9.3             │ ~5.9.2            │
│ vitest                    │ 4.0.18            │ ^4.0.8            │
│ zone.js                   │ 0.16.1            │ ^0.16.1           │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else relevant?

No response

[alan-agius4]

I am unable to reproduce this. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[HazzMan2409]

Sorry @alan-agius4, I've updated the description.
Repoduction is available here -> https://github.com/HazzMan2409/prebundle-order-issue

[alan-agius4]

I am not following what is the problem here.

main.js

// src/zone-flags.ts
console.log("zone flags");

// src/main.ts
import "/@fs/usr/local/xxxx/.angular/cache/21.2.0/prebundle-order-issue/vite/deps/zone__js.js?v=83d59424";


//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy96b25lLWZsYWdzLnRzIiwic3JjL21haW4udHMiXSwic291cmNlc0NvbnRlbnQiOlsiY29uc29sZS5sb2coXCJ6b25lIGZsYWdzXCIpIiwiaW1wb3J0IFwiLi96b25lLWZsYWdzXCI7XG5pbXBvcnQgXCJ6b25lLmpzXCI7XG5cbiJdLCJtYXBwaW5ncyI6IjtBQUFBLFFBQVEsSUFBSSxZQUFZOzs7QUNDeEIsT0FBTzsiLCJuYW1lcyI6W119

[HazzMan2409]

@alan-agius4
The problem is with that main.js the zone-flags console log runs after zone.js. Stick a breakpoint on the console.log, the Zone global is defined at that point.

[alan-agius4]

That is expected and is per ECMA specifications, the dependency graph is evaluated depth-first. This means all imported modules and their sub-dependencies must finish executing before the code in main.ts execution. Top-level code executes only after the entire import tree is resolved.

In your specific case you need force zone.js to be excluded from prebundling.

"serve": {
  "builder": "@angular/build:dev-server",
  "options": {
    "prebundle": {
      "exclude": ["zone.js"]
    }
  },
  "configurations": {
    "production": {
      "buildTarget": "prebundle-order-issue:build:production"
    },
    "development": {
      "buildTarget": "prebundle-order-issue:build:development"
    }
  },
  "defaultConfiguration": "development"
},

[HazzMan2409]

@alan-agius4 thanks for the workaround.

I don't know if I agree with the outcome though. My source code has two ordered import statements and prebundling is removing that order.
Maybe my gripe is with Vite... but it's not an ideal app authoring experience and previous angular versions gave the correct order.
I think this will break a lot of people that set zone flags!

[HazzMan2409]

The same thing happens with the polyfills array. Why is this an array if my order is not respected?

[alan-agius4]

When running ng serve, the build process treats external dependencies as distinct entities and vite will prebundle them, whereas local source files are compiled and merged directly into the main application bundles.