ng build --localize fails when using module federation

[milanc]

Hi

I have a project that uses module federation (similar to https://github.com/manfredsteyer/module-federation-plugin-example) After I added translations and running ng build --localize getting error Localized bundle generation failed: project-web\main.js: import.meta may appear only with 'sourceType: "module"

Did some debugging and pinpoint the issue to this line: https://github.com/angular/angular-cli/blob/464cf330a14397470e1e57450a77f421a45a927e/packages/angular_devkit/build_angular/src/utils/process-bundle.ts#L150

I assume that babel parsing in this stage should not be responsible for validation of already processed code so this error does not make much sense.

Would it make sense to change this to sourceType: 'unambiguous'. - per babel documentation https://babeljs.io/docs/en/options#sourcetype this seems like valid solution.

I've tested this approach and generated code for non module federated projects is the same both 'script' and 'unambiguous' values is identical.

@[email protected] @angular-architects/[email protected]

[michalma]

anyone figured out how to fix this? any workarounds?

[milanc]

You can write a post install script to patch that particular line of code, that worked for me.

[joseluiz98]

Did someone figured that out? I'm having the same issue after upgrading to angular v13 :(

[michalma]

@milanc thanks, it's working!

@joseluiz98 as a temporary workaround you have to change sourceType to unambiguous in your local copy(inside node_modules) of this file: https://github.com/angular/angular-cli/blob/464cf330a14397470e1e57450a77f421a45a927e/packages/angular_devkit/build_angular/src/utils/process-bundle.ts#L150

Then you can easily prepare a patch with this tool: https://github.com/ds300/patch-package

[bridzius]

A possible workaround that worked for us is downgrading the TS compilation target from ES2020 to ES2019 in tsconfig.app.json. It seems to remove this issue temporarily.

[mJustGER]

Hi,

i also have the problem, but also use nx. Error messsage of running localized builds:
nx / angular is able to build localized apps. But if mfe is added by @angular-architects/module-federation all builds break.

@bridzius workaround by downgradeing to ES2019 works also well for nx / angular projects!

NX   RunStart


{
  "meta": {
    "nxCloudVersion": "latest"
  },
  "branch": null,
  "runGroup": "0f812757bcc70676bb5819e0deedaa509f1bc284",
  "hashes": [
    "2c3ae5f6939f2bccc377b016d96487405561a7f1d855c6a01648870c6fb904fb"
  ]
}

RunStart duration: 191

  NX   Nx Cloud: Cache miss 2c3ae5f6939f2bccc377b016d96487405561a7f1d855c6a01648870c6fb904fb.


nx run my-angular-app:build:production

⠙ Generating browser application bundles (phase: setup)...<t> [webpack.cache.PackFileCacheStrategy] restore cache container: 26.084 ms
⠹ Generating browser application bundles (phase: building)...<t> [webpack.cache.PackFileCacheStrategy] check build dependencies: 1104.2983 ms
<t> [webpack.cache.PackFileCacheStrategy] restore cache content metadata: 4.6979 ms
    [webpack.cache.PackFileCacheStrategy] starting to restore cache content 1 (145 bytes) because of request to: ProgressPlugin|counts
    [webpack.cache.PackFileCacheStrategy] starting to restore cache content 0 (24.7 MiB) because of request to: ResolverCachePlugin|normal|default|dependencyType=|esm|path=|C:\Users\matth\repo\my-workspace|request=|C:\Users\matth\repo\my-workspace\apps\my-angular-app\src\main.ts
<t> [webpack.cache.PackFileCacheStrategy] restore cache content 1 (145 bytes): 1.2067 ms
    [webpack.cache.PackFileCacheStrategy] Deserialization of 'Compilation/modules|javascript/esm|C:\Users\matth\repo\my-workspace\node_modules\@angular-devkit\build-angular\src\babel\webpack-loader.js??ruleSet[1].rules[2].use[0]!C:\Users\matth\repo\my-workspace\node_modules\@angular\platform-browser\fesm2020\platform-browser.mjs': 1.7432 ms
    [webpack.cache.PackFileCacheStrategy] Deserialization of 'Compilation/modules|C:\Users\matth\repo\my-workspace\node_modules\@angular-devkit\build-angular\src\babel\webpack-loader.js??ruleSet[1].rules[2].use[0]!C:\Users\matth\repo\my-workspace\node_modules\rxjs\dist\esm\index.js': 1.2591 ms
<t> [webpack.cache.PackFileCacheStrategy] restore cache content 0 (24.7 MiB): 56.5858 ms
⠏ Generating browser application bundles (phase: sealing)...    [IdleFileCachePlugin] Initial cache was generated and cache will be persisted in 5s.
✔ Browser application bundle generation complete.
asset 571.df38f542d438fb92.js 198 KiB {571} [emitted] [immutable] [javascript module]
asset 782.a97096cf750b5100.js 66.8 KiB {782} [emitted] [immutable] [javascript module] (name: bootstrap)
asset 181.e6fce2857afcd1cb.js 59.6 KiB {181}, {895} [emitted] [immutable] [javascript module]
asset 895.ba1290a87f6c39df.js 59.6 KiB {895} [emitted] [immutable] [javascript module]
asset polyfills.55f481b98fe5b811.js 39.9 KiB {429} [emitted] [immutable] [javascript module] (name: polyfills)
asset 3rdpartylicenses.txt 12.7 KiB [emitted]
asset main.9ea00fcddc7e95f9.js 6.66 KiB {179} [emitted] [immutable] [javascript module] (name: main)
asset styles.ef46db3751d8e999.css 0 bytes {532} [emitted] [immutable] (name: styles)
Entrypoint main 6.66 KiB = main.9ea00fcddc7e95f9.js
Entrypoint polyfills 39.9 KiB = polyfills.55f481b98fe5b811.js
Entrypoint styles = styles.ef46db3751d8e999.css
chunk {179} (runtime: main) main.9ea00fcddc7e95f9.js (main) 70 bytes (javascript) 84 bytes (share-init) 17.9 KiB (runtime) [entry]
  cached modules 70 bytes (javascript) 84 bytes (share-init) 17.9 KiB (runtime) [cached] 17 modules
chunk {181} (runtime: main, polyfills, styles) 181.e6fce2857afcd1cb.js 42 bytes (consume-shared) 257 KiB (javascript)
  cached modules 257 KiB (javascript) 42 bytes (consume-shared) [cached] 2 modules
chunk {429} (runtime: polyfills) polyfills.55f481b98fe5b811.js (polyfills) 109 KiB (javascript) 84 bytes (share-init) 17.8 KiB (runtime) [entry]
  cached modules 84 bytes (share-init) 109 KiB (javascript) 17.8 KiB (runtime) [cached] 20 modules
chunk {532} (runtime: styles) styles.ef46db3751d8e999.css (styles) 50 bytes (javascript) 79 bytes (css/mini-extract) 84 bytes (share-init) 17.6 KiB (runtime) [entry]
  cached modules 84 bytes (share-init) 50 bytes (javascript) 79 bytes (css/mini-extract) 17.6 KiB (runtime) [cached] 18 modules
chunk {571} (runtime: main, polyfills, styles) 571.df38f542d438fb92.js 1.15 MiB
  cached modules 1.15 MiB [cached] 36 modules
chunk {782} (runtime: main) 782.a97096cf750b5100.js (bootstrap) 194 KiB (javascript) 84 bytes (consume-shared)
  cached modules 194 KiB (javascript) 84 bytes (consume-shared) [cached] 38 modules
chunk {895} (runtime: main) 895.ba1290a87f6c39df.js 257 KiB
  cached modules 257 KiB [cached] 1 module


LOG from webpack.Compiler
<t> make hook: 272.8485 ms
<t> finish make hook: 1.0202 ms
<t> finish compilation: 65.454 ms
<t> seal compilation: 384.7858 ms
<t> afterCompile hook: 0.1608 ms
<t> emitAssets: 5.9655 ms
<t> emitRecords: 0.0642 ms
<t> done hook: 0.5758 ms
<t> beginIdle: 0.8606 ms

LOG from webpack.Compilation
<t> compute affected modules: 0.0021 ms
<t> finish modules: 62.7385 ms
<t> report dependency errors and warnings: 2.6876 ms
<t> optimize dependencies: 6.8187 ms
<t> create chunks: 5.0066 ms
<t> compute affected modules with chunk graph: 0.0025 ms
<t> optimize: 29.0058 ms
    89 modules hashed, 0 from cache (0.36 variants per module in average)
<t> module hashing: 9.9771 ms
    0% code generated (0 generated, 48 from cache)
<t> code generation: 1.3689 ms
<t> runtime requirements.modules: 0.8019 ms
<t> runtime requirements.chunks: 0.2513 ms
<t> runtime requirements.entries: 3.6395 ms
<t> runtime requirements: 4.755 ms
<t> hashing: initialize hash: 0.0036 ms
<t> hashing: sort chunks: 0.055 ms
<t> hashing: hash runtime modules: 6.1114 ms
<t> hashing: hash chunks: 2.3144 ms
<t> hashing: hash digest: 0.0432 ms
<t> hashing: process full hash modules: 0.0017 ms
<t> hashing: 8.7488 ms
    0% code generated (0 generated, 43 from cache)
<t> record hash: 0.0566 ms
<t> module assets: 0.1814 ms
<t> create chunk assets: 1.4976 ms
<t> process assets: 316.0206 ms

LOG from webpack.ResolverCachePlugin
    0% really resolved (0 real resolves with 0 cached but invalid, 1679 cached valid, 0 concurrent)

LOG from webpack.FlagDependencyExportsPlugin
<t> restore cached provided exports: 1.7472 ms
<t> figure out provided exports: 4.8063 ms
    1% of exports of modules have been determined (8 no declared exports, 3 not cached, 0 flagged uncacheable, 235 from cache, 0 from mem cache, 0 additional calculations due to dependencies)
<t> store provided exports into cache: 0.0056 ms

LOG from webpack.SideEffectsFlagPlugin
<t> update dependencies: 1.9035 ms

LOG from webpack.FlagDependencyUsagePlugin
<t> initialize exports usage: 0.3896 ms
<t> trace exports usage in graph: 3.5953 ms

LOG from webpack.buildChunkGraph
<t> visitModules: prepare: 0.291 ms
<t> visitModules: visiting: 0.8221 ms
<t> visitModules: calculating available modules: 0.3017 ms
<t> visitModules: merging available modules: 0.328 ms
<t> visitModules: check modules for revisit: 0.1049 ms
<t> visitModules: prepare: 0.8224 ms
<t> visitModules: visiting: 1.6323 ms
<t> visitModules: calculating available modules: 0.103 ms
<t> visitModules: merging available modules: 0.0218 ms
<t> visitModules: check modules for revisit: 0.0014 ms
<t> visitModules: prepare: 0.2417 ms
<t> visitModules: visiting: 0.4244 ms
    460 queue items processed (216 blocks)
    10 chunk groups connected
    5 chunk groups processed for merging (10 module sets, 3 forked, 97 + 3 modules forked, 12 + 2 modules merged into fork, 7 resulting modules)
    5 chunk group info updated (0 already connected chunk groups reconnected)
<t> visitModules: 3.8236 ms
<t> connectChunkGroups: 0.1523 ms
<t> cleanup: 0.0034 ms

LOG from webpack.SplitChunksPlugin
<t> prepare: 0.023 ms
i18n file queued for processing: 895.ba1290a87f6c39df.js
⠹ Generating localized bundles...i18n file processed: 782.a97096cf750b5100.js
i18n file processed: 181.e6fce2857afcd1cb.js
i18n file processed: 895.ba1290a87f6c39df.js
i18n file processed: polyfills.55f481b98fe5b811.js
✖ Localized bundle generation failed: Cannot assign to read only property 'message' of object 'SyntaxError: import.meta may appear only with 'sourceType: "module"' (1:2970)
An error occurred inlining file "main.9ea00fcddc7e95f9.js"

 —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— 

  NX   Running target "my-angular-app:build" failed

   Failed tasks:

   - my-angular-app:build:production

   Hint: run the command with --verbose for more details.

   See Nx Cloud run details at https://nx.app/runs/vw94xNimTw

[TianeErwee]

If anybody lands up here for the same reason as me. If you have:

• Nx Repo
• Angular 13
• Module Federation MFE's
• and localization requirements

You can't just go to target ES2019, you have to implement the patch-package fix.

For clarity - this is because with target as ES2019 publicPath: 'auto' does not work which is pretty much required for dynamically loading MFE's

[angular-automatic-lock-bot[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.}