René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":" Chunk optimizer assigns the same identifier to an external `@angular/core` namespace import and a class in the same chunk → \"ɵɵdefineComponent is not a function\"","articleBody":"### Command\n\nbuild\n\n### Is this a regression?\n\n- [x] Yes, this behavior used to work in the previous version\n\n### The previous version in which this bug was not present was\n\nAngular 21 (@angular/build 21.x) — the same app built and ran correctly before the upgrade to Angular 22\n\n### Description\n\nWith `@angular/build`'s default chunk-optimization pass (`NG_BUILD_OPTIMIZE_CHUNKS`, threshold 3), a production build of a large app that **externalizes `@angular/core`** (as Angular Native      \n  Federation does for singleton sharing) produces chunks where the optimizer's renamer assigns the **same minified identifier `e`** to BOTH the external `@angular/core` namespace import AND a      \n  component's named class expression in the same chunk. The class-expression name shadows the namespace inside the class body, so the static initializer calls `\u003cclass\u003e.ɵɵdefineComponent(...)`,     \n  which is `undefined` → `TypeError` at bootstrap → blank white page.                                                                                                                                \n                                                                                                                                                                                                     \n  ### Exact mechanism (compiled output)                                                                                                                                                              \n                                                                                                                                                                                                     \n  ```js                                                                                                                                                                                              \n  import * as e from '@angular/core';                 // external namespace import → minified to \"e\"                                                                                                 \n  let e$1 = class e {                                  // class-expression name → ALSO minified to \"e\"                                                                                               \n    static ɵfac = (o) =\u003e new (o || e)();               // e = the class (self-ref, correct)                                                                                                          \n    static ɵcmp = e.ɵɵdefineComponent({ type: e });    // e.ɵɵdefineComponent: e = the class (WRONG — must be @angular/core)                                                                         \n  };                                                                                                                                                                                                 \n  ```                                                                                                                                                                                                \n                                                                                                                                                                                                     \n  Correct (non-optimized) output uses distinct names: `import * as i0 from '@angular/core'` + `i0.ɵɵdefineComponent({ type: _MyComponent })`.                                                        \n                                                                                                                                                                                                     \n  ### It is specifically the identifier `e`                                                                                                                                                          \n                                                                                                                                                                                                     \n  Measured on one real build (~130 lazy chunks importing the `@angular/core` namespace):                                                                                                             \n                                                                                                                                                                                                     \n  | `@angular/core` namespace minified to… | chunks | of which collide |                                                                                                                             \n  |---|---|---|                                                                                                                                                                                      \n  | `e` | 52 | 5 |                                                                                                                                                                                   \n  | any other letter (t, n, a, i, o, r, s, …) | ~78 | 0 |                                                                                                                                            \n                                                                                                                                                                                                     \n  `namespace=e` + class=`t` → fine; `namespace=o` + class=`e` → fine; only `namespace=e` + class=`e` collides. The renamer fails to deduplicate only for the letter `e`, and only when both a kept   \n  external namespace import and a class-expression name in the same chunk land on it. Colliding components share no source pattern — it is purely a renamer name-allocation collision.               \n                                                                                                                                                                                                     \n  Same class of defect as the closed angular/angular-cli#32764 → rolldown/rolldown#8793 (\"colliding variable names\"), but still reproduces on `rolldown@1.0.3` as bundled by `@angular/build@22.0.x`.\n                                                                                                                                                                                                        \n  **Workaround:** \n- `NG_BUILD_OPTIMIZE_CHUNKS=0` — disables only the chunk-optimization pass; keeps mangling + other minification (main bundle ~126 kB vs ~129 kB).                                                  \n- `NG_BUILD_MANGLE=0` — keeps full identifier names, so the namespace stays `i0` and never collides.       \n\n### Minimal Reproduction\n\n A minimal synthetic reproduction could not be constructed, and the reason is diagnostic: the collision only occurs when the renamer's GLOBAL name-frequency allocation over a large, diverse module\n  graph happens to place the identifier `e` on both a kept external `@angular/core` namespace import and a class-expression name in the same chunk. In uniform synthetic apps (Native Federation +   \n  optimizer, up to ~240 lazy chunks, even with ~35 imports per component and many `e`-namespace chunks), classes are allocated other letters (a/n/o/i) and never collide with the `e` namespace.     \n                                                                                                                                                                                                     \n  It reproduces reliably in a large Angular Native Federation **host** shell (~130 lazy chunks from ~270 diverse compiled components). Extensive bisection ruled out: federation infrastructure      \n  (orchestrator, `@module-federation/enhanced`, `share`/`sharedMappings` config), the eager provider graph, the shared component library (an isolated MFE with 88 shared components at 157 chunks    \n  does NOT collide), specific dependencies, `experimentalDecorators`, `@angular/build`/`esbuild`/native-federation versions, and raw chunk count. Two independent parts of the app each push it over \n  the threshold, confirming an emergent renamer-allocation effect rather than a single module.                                                                                                                                                                                                                                                                                         \n\n### Exception or Error\n\n```text\nERROR TypeError: e.ɵɵdefineComponent is not a function                                                                                                                                                    \n      at \u003cstatic_initializer\u003e (https://.../chunk-XXXXXXXX.js:1:4257)                                                                                                                                        \n      at https://.../chunk-XXXXXXXX.js                                                                                                                                                                      \n      at https://.../main-XXXXXXXX.js                                                                                                                                                                       \n  (thrown from runInitializers → the application never bootstraps → blank page)\n```\n\n### Your Environment\n\n```text\nAngular CLI: 22.0.3                                                                                                                                                                                       \n  Node: 22.x                                                                                                                                                                                                \n  Package Manager: pnpm 10.10                                                                                                                                                                               \n  OS: darwin arm64                                                                                                                                                                                          \n                                                                                                                                                                                                            \n  Angular: 22.0.2                                                                                                                                                                                           \n  ... @angular/build            22.0.3                                                                                                                                                                      \n  ... @angular-devkit/*         22.0.3                                                                                                                                                                      \n                                                                                                                                                                                                            \n  Additional:                                                                                                                                                                                               \n    @angular-architects/native-federation   22.0.5                                                                                                                                                          \n    @softarc/native-federation               4.3.1                                                                                                                                                          \n    rolldown (transitive via @angular/build) 1.0.3                                                                                                                                                          \n    Nx                                       23.1.0                                                                                                                                                         \n    TypeScript                               6.0.3\n```\n\n### Anything else relevant?\n\n  - `chunk-optimizer.js` is byte-identical between `@angular/build` 22.0.3 and 22.0.7.                                                                                                               \n  - Forcing `esbuild@0.28.0` (vs 0.28.1) via a package-manager override does not change anything.                                                                                                    \n  - Bumping `@angular-architects/native-federation` (22.0.1 → 22.0.5) does not change anything.                                                                                                      \n  - References: angular/angular-cli#32764, rolldown/rolldown#8793.","author":{"url":"https://github.com/ChristianLoosliVGT","@type":"Person","name":"ChristianLoosliVGT"},"datePublished":"2026-07-16T10:00:10.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1},"url":"https://github.com/33583/angular-cli/issues/33583"}