Skip to content

Angular 22 chunk optimization still corrupts shared externals #107

Description

@dr460nf1r3

#72 is seemingly not entirely fixed in the latest version. Here this still seems to happen if I understand correctly. The fact that I get an ɵɵdefineService error in production builds (as opposed to the component above) and that setting the env during build time fixes it makes me believe it is the case. Besides turning off optimization entirely also fixes the issue.

Error in prod:

typeError: t.ɵɵdefineService is not a function
    at <static_initializer> (chunk-DRel_GHB.js:4:14753)
    at chunk-DRel_GHB.js:4:13917
    at chunk-DRel_GHB.js:4:14823

Sample build sample files with no env set:

-rw-r--r--   1 nijen staff    61254 Jul 29 16:11 chunk-BAKmRvmB.js
-rw-r--r--   1 nijen staff    71126 Jul 29 16:11 chunk-BLxD3zW8.js
-rw-r--r--   1 nijen staff   409971 Jul 29 16:11 chunk-BSWShLEb.js
-rw-r--r--   1 nijen staff     2936 Jul 29 16:11 chunk-BfBYYfqt.js
-rw-r--r--   1 nijen staff   108575 Jul 29 16:11 chunk-BgXkgfjM.js
-rw-r--r--   1 nijen staff     8564 Jul 29 16:11 chunk-C-rXaqam.js
-rw-r--r--   1 nijen staff    75678 Jul 29 16:11 chunk-CQOlNMmw.js
-rw-r--r--   1 nijen staff  1083062 Jul 29 16:11 chunk-CV4TgImQ.js
-rw-r--r--   1 nijen staff     3077 Jul 29 16:11 chunk-CYArbaVx.js
-rw-r--r--   1 nijen staff     2442 Jul 29 16:11 chunk-ClxdHx00.js
-rw-r--r--   1 nijen staff    73159 Jul 29 16:11 chunk-CmsJGRGt.js
-rw-r--r--   1 nijen staff  1937702 Jul 29 16:11 chunk-CyUdXsnP.js
-rw-r--r--   1 nijen staff     8716 Jul 29 16:11 chunk-D-iGuZ4z.js
-rw-r--r--   1 nijen staff    17932 Jul 29 16:11 chunk-D4hMdsc0.js
-rw-r--r--   1 nijen staff   182400 Jul 29 16:11 chunk-DBY-6WfD.js
-rw-r--r--   1 nijen staff     3155 Jul 29 16:11 chunk-DKE9qkuO.js
-rw-r--r--   1 nijen staff     7877 Jul 29 16:11 chunk-DWgmysyv.js
-rw-r--r--   1 nijen staff    81464 Jul 29 16:11 chunk-DZoRqOns.js
-rw-r--r--   1 nijen staff    19768 Jul 29 16:11 chunk-DcNmA6hY.js
-rw-r--r--   1 nijen staff     5494 Jul 29 16:11 chunk-DeK22HLJ.js
-rw-r--r--   1 nijen staff    12177 Jul 29 16:11 chunk-Dgdq1dvA.js
-rw-r--r--   1 nijen staff     4748 Jul 29 16:11 chunk-DqcN9uR6.js

with variable set explicitly:

-rw-r--r--  1 nijen staff    2167 Jul 29 16:27 chunk-LTVOGC3Y.js
-rw-r--r--  1 nijen staff  274752 Jul 29 16:27 chunk-LZKY23CD.js
-rw-r--r--  1 nijen staff   74984 Jul 29 16:27 chunk-M22IPLYB.js
-rw-r--r--  1 nijen staff    3116 Jul 29 16:26 chunk-MG4QGYYZ.js
-rw-r--r--  1 nijen staff    3026 Jul 29 16:27 chunk-MMXODR4X.js
-rw-r--r--  1 nijen staff 1694085 Jul 29 16:27 chunk-PFBS7E6K.js
-rw-r--r--  1 nijen staff    2777 Jul 29 16:27 chunk-PTB33LOL.js
-rw-r--r--  1 nijen staff    1750 Jul 29 16:26 chunk-PZNONLPT.js
-rw-r--r--  1 nijen staff  108115 Jul 29 16:27 chunk-QWUWXNGU.js
-rw-r--r--  1 nijen staff   70866 Jul 29 16:27 chunk-S4QPNL5Y.js
-rw-r--r--  1 nijen staff   11375 Jul 29 16:27 chunk-S6B6RIUT.js
-rw-r--r--  1 nijen staff   56066 Jul 29 16:27 chunk-S7FCZWSL.js
-rw-r--r--  1 nijen staff    1682 Jul 29 16:27 chunk-TMBDFVLK.js
-rw-r--r--  1 nijen staff    5757 Jul 29 16:27 chunk-TNKXNVBG.js
-rw-r--r--  1 nijen staff    9894 Jul 29 16:27 chunk-TNLA2KMU.js
-rw-r--r--  1 nijen staff   81383 Jul 29 16:27 chunk-TRCZMJHZ.js
-rw-r--r--  1 nijen staff    8355 Jul 29 16:27 chunk-V7L4JJSU.js
-rw-r--r--  1 nijen staff   17955 Jul 29 16:27 chunk-V7LNCRHH.js
-rw-r--r--  1 nijen staff  408716 Jul 29 16:27 chunk-VYKMNCBK.js
-rw-r--r--  1 nijen staff   49602 Jul 29 16:26 chunk-WNFK3WQ6.js
-rw-r--r--  1 nijen staff     703 Jul 29 16:26 chunk-XLSTF3FT.js
-rw-r--r--  1 nijen staff     603 Jul 29 16:27 chunk-Y5WBWCBW.js

I suppose these always look like this?

-rw-r--r--  1 nijen staff   80139 Jul 29 16:26 _angular_common.O1z_Q1E7fj.js
-rw-r--r--  1 nijen staff   48077 Jul 29 16:26 _angular_common_http.gitxwnnFzU.js
-rw-r--r--  1 nijen staff    2291 Jul 29 16:26 _angular_common_locales_de.QzWZlQEKsi.js
-rw-r--r--  1 nijen staff    1464 Jul 29 16:26 _angular_common_locales_en.nalRqdEVyA.js
-rw-r--r--  1 nijen staff  377400 Jul 29 16:26 _angular_core.kUUiHpimVl.js
-rw-r--r--  1 nijen staff     661 Jul 29 16:26 _angular_core_primitives_di.yHhtwYT1qJ.js
-rw-r--r--  1 nijen staff    4403 Jul 29 16:26 _angular_core_primitives_signals.QT1-1fvrKr.js
-rw-r--r--  1 nijen staff    3680 Jul 29 16:26 _angular_core_rxjs_interop.j5j5JBYmT7.js
-rw-r--r--  1 nijen staff   83262 Jul 29 16:26 _angular_forms.crE4F_3Xf7.js
-rw-r--r--  1 nijen staff   26174 Jul 29 16:26 _angular_platform_browser.MVmAec8-Pb.js
-rw-r--r--  1 nijen staff  120107 Jul 29 16:26 _angular_router.MlgxWjt1N6.js
-rw-r--r--  1 nijen staff   30447 Jul 29 16:26 _jsverse_transloco.OqmTMejTEp.js

Federation config:

import { share, withNativeFederation } from '@angular-architects/native-federation/config';

export default withNativeFederation({
  name: 'shell',

  shared: {
    ...share({
      '@angular/core': {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
        includeSecondaries: { keepAll: true },
      },
      '@angular/common': {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
        includeSecondaries: { keepAll: true },
      },
      '@angular/common/http': {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
      },
      '@angular/common/locales/de': {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
      },
      '@angular/common/locales/en': {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
      },
      '@angular/router': {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
      },
      '@angular/forms': {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
      },
      '@angular/platform-browser': {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
      },
      '@angular/platform-browser-dynamic': {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
      },
      '@jsverse/transloco': {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
      },
      rxjs: {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
      },
    }),
  },

  sharedMappings: ['somelib'],

  features: {
    ignoreUnusedDeps: true,
  },
});

Relevant versions in use:

    "@angular-architects/native-federation": "^22.0.6",
    "@angular-devkit/core": "22.0.7",
    "@angular-devkit/schematics": "22.0.7",
    "@angular/animations": "22.0.8",
    "@angular/cdk": "22.0.5",
    "@angular/common": "22.0.8",
    "@angular/compiler": "22.0.8",
    "@angular/core": "22.0.8",
    "@angular/forms": "22.0.8",
    "@angular/platform-browser": "22.0.8",
    "@angular/router": "22.0.8",
    "@softarc/native-federation": "~4.3.2",
    "@softarc/native-federation-orchestrator": "^4.2.2",

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions