Angular MFE setup is broken after migration from 17 to 18 or 19

[VanTigranyan]

Current Behavior

We have a setup that uses NX for angular micro frontends. We utilize dynamic module federation for that. We have a shell app and several remote apps. Obviously, we have a manifest file that we use locally to run MFEs. In the manifest, we have the names of remote apps and the corresponding hosts and ports. A very standard setup that is suggested and even generated by NX. Ports in the manifest are different, of course, but after migration to the latest version, NX now runs just one static server for all remote apps. No problem, we can change all ports in manifest to point to the same host and port right? But what do we do when we want to run just one remote app via a dev server? Now I have to go and change the port in the manifest file for that remote app. I cannot commit this, as this is not what we expect from a dev server. So now, at least, the local setup for our MFEs is broken if we migrate to the latest version, and we are stuck on 17 because of this.

Here is the replication of the project after migration to 19th version. It doesn't even run.

Expected Behavior

We expect the old setup to still be supported, either by opting out of serving all remote apps by just one static server or with some other solution. The NX documentation and guides do not reflect the new logic of the local development setup, so we don't know what to do.

Here is the replication of our setup for NX 17, which works perfectly well. If we migrate it using NX to latest versions it breaks.

GitHub Repo

https://github.com/VanTigranyan/nx-mfe-repl-19

Steps to Reproduce

We can replicate this with 2 methods.

1. Clone this repo. This is the replication of our current setup using NX 17.
2. Try to migrate it to NX 18 or 19
3. Verify that the setup is broken by running nx serve shell
4. If we fix the issue, we still cannot run remote applications on separate ports without using --devRemotes, that serves remote apps via webpack dev server making the testing cycle very long.

Second method.

1. Clone already migrated repo.
2. npm install
3. nx serve shell
4. Verify that the setup is broken
5. Follow the steps for the first variant above.

Nx Report

`After migration`:

NX   Report complete - copy this into the issue template

Node   : 18.19.1
OS     : darwin-arm64
npm    : 9.9.3

nx                 : 19.1.1
@nx/js             : 19.1.1
@nx/jest           : 19.1.1
@nx/linter         : 19.1.1
@nx/eslint         : 19.1.1
@nx/workspace      : 19.1.1
@nx/angular        : 19.1.1
@nx/devkit         : 19.1.1
@nx/eslint-plugin  : 19.1.1
@nrwl/tao          : 19.1.1
@nx/web            : 19.1.1
@nx/webpack        : 19.1.1
typescript         : 5.4.5

`Before migration`:
>  NX   Report complete - copy this into the issue template

   Node   : 18.19.1
   OS     : darwin-arm64
   npm    : 9.9.3
   
   nx                 : 17.1.2
   @nx/js             : 17.1.2
   @nx/jest           : 17.1.2
   @nx/linter         : 17.1.2
   @nx/eslint         : 17.1.2
   @nx/workspace      : 17.1.2
   @nx/angular        : 17.1.2
   @nx/cypress        : 17.1.2
   @nx/devkit         : 17.1.2
   @nx/eslint-plugin  : 17.1.2
   @nrwl/tao          : 17.1.2
   @nx/web            : 17.1.2
   @nx/webpack        : 17.1.2
   typescript         : 5.2.2

Failure Logs

Error logs after migration:

> nx run shell:serve:development


 NX  Starting module federation dev-server for shell with 3 remotes


 NX   Cannot read properties of undefined (reading 'find')


TypeError: Cannot read properties of undefined (reading 'find')
    at startRemotes (/Users/vtigranyan/projects/wf-fusion/nx-mfe-repl-18/node_modules/@nx/angular/src/executors/module-federation-dev-server/lib/start-dev-remotes.js:16:58)
    at moduleFederationDevServerExecutor (/Users/vtigranyan/projects/wf-fusion/nx-mfe-repl-18/node_modules/@nx/angular/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js:81:61)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at getLastValueFromAsyncIterableIterator (/Users/vtigranyan/projects/wf-fusion/nx-mfe-repl-18/node_modules/nx/src/utils/async-iterator.js:15:19)
    at iteratorToProcessStatusCode (/Users/vtigranyan/projects/wf-fusion/nx-mfe-repl-18/node_modules/nx/src/command-line/run/run.js:44:29)
    at handleErrors (/Users/vtigranyan/projects/wf-fusion/nx-mfe-repl-18/node_modules/nx/src/utils/params.js:9:16)
    at process.<anonymous> (/Users/vtigranyan/projects/wf-fusion/nx-mfe-repl-18/node_modules/nx/bin/run-executor.js:59:28)

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

 NX   Running target serve for project shell failed

Failed tasks:

- shell:serve:development

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

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

To summarize, we have two problems.

1. Migration breaks MFE setup.
2. If we fix this, now we cannot serve remote apps separately on a static server, making dynamic module federation un-runnable locally without using --devRemotes.

[VanTigranyan]

Hi @leosvelperez. Thanks a lot for so quick response. The changes you made fix the issue with broken run, but the issue with static server is our main problem. Even if we fix the devRemotes option issue, we need a way to opt out one static server for all remotes feature, or something that will allow us dynamically set remote definitions in manifest when running locally.

[Coly010]

Hi @VanTigranyan !

Indeed, dynamic federation has issues with the new approach which was introduced to save CPU and RAM resources on machines, particularly when there are a large number of remotes to be served.

We are iterating on potential solutions and I hope to get a fix merged as soon as possible.

I'm sorry for the inconvenience caused by this change and I do hope to resolve it as soon as I can.

[VanTigranyan]

Indeed

Awesome. Thank you very much. I am glad that it is on your radar. I should've reported this earlier, but I thought we could come up with a workaround. Unfortunately, no solution worked for us. So we'll eagerly wait for a solution from you. As I mentioned, even a simple opt-out would suffice, like disabling the single server with an option in project.json. Anyways, thanks again.

[Coly010]

Hi @VanTigranyan. An update from our side. We have decided on a fix for this and will look to implement it in the coming weeks.

[dexster]

Hi @Coly010

Using your example repo, nx-ng-dyn-fed I also get an error with dynamic federation if I change the remote in your module-federation.manifest.json to one that is not inside that example project.

NX   Cannot read properties of undefined (reading 'data')"
TypeError: Cannot read properties of undefined (reading 'data')
   at /Users/brett.upton/Development/roa/node_modules/@nx/webpack/src/utils/module-federation/get-remotes-for-host.js:67:46

Downgrading to Nx 17.3.1 fixes the issue.

Before I create a new issue, are you able to confirm it is related to this issue and that your example runs fine with the fix you have decided on above?

[VanTigranyan]

@Coly010 Thank you very much. I'm looking forward to testing the fix out and upgrading our project
.

[VanTigranyan]

@Coly010 What's the fix, if it's not a secret? 😄

[VanTigranyan]

@Coly010 any updates on this? We really are unable to upgrade, and it causes us a lot of trouble. I would appreciate any updates here.

[Coly010]

There's an open PR that should address this: #26782

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.