Description
Current Behavior
I was previously using Nx 16.0.1 with Angular 15.2.4, where I had one shell app and 15 static remote apps. The shell app loaded remotes perfectly using static remote configuration. However, after upgrading to Nx 20.1.4 and Angular 18.2.13, and migrating from static remotes to dynamic remote loading, the shell app no longer loads remotes correctly.
Steps to Upgrade
Upgraded Nx one major version at a time (as recommended) until reaching Nx 20.1.4.
Upgraded Angular to 18.2.13.
Ran all necessary migrations.
Adjusted static remote loading to dynamic remote loading.
The build ran successfully for all apps.
Current Behavior
When serving the shell app, it loads the same remoteEntry.mjs file (always the last mentioned remote in module.federation.manifest.json), regardless of which micro frontend I attempt to load.
However, if I start all remote apps first using this
nx serve remote-app1 &
nx serve remote-app2 &
nx serve remote-app3 &
nx serveremote-app4 &
nx serve remote-app5 &
nx serve lava-operation-app &
..........all 15 remotes
sleep 10 && nx serve shell-app
and then serve the shell app, everything works correctly, and remotes load properly.
[The following logs appear when serving the shell app:
NX Built 15 static remotes
NX Starting static remotes proxies...
NX Static remotes proxies started successfully
(node:9088) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 exit listeners added to [process]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)
(node:9088) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGTERM listeners added to [process]. Use emitter.setMaxListeners() to increase limit
Starting up http-server, serving C:\Projects\luna-mfe\tmp\static-remotes.](url)
Manifest.json Configuration
{
"remoteApp1": "http://localhost:4201/remoteEntry.mjs",
"remoteApp2": "http://localhost:4202/remoteEntry.mjs",
"remoteApp3": "http://localhost:4203/remoteEntry.mjs",
"remoteApp4": "http://localhost:4204/remoteEntry.mjs",
...
"remoteApp15": "http://localhost:4215/remoteEntry.mjs"
}
Additional Notes
I cloned the Nx dynamic federation repo: https://github.com/Coly010/nx-ng-dyn-fed/tree/main and migrated it to Nx 20.1.4.
The only difference I noticed is that this repo exposes Router, whereas my project exposes Module.
Apart from that, everything else appears to be the same.
Request for Assistance
Is there any configuration I missed?
Why does the shell app load only the last remote app from module.federation.manifest.json instead of dynamically resolving the correct remoteEntry.mjs?
Why does it work correctly only when I start all remotes first and then run the shell app?
Node : 22.0.0
OS : win32-x64
Native Target : x86_64-windows
npm : 10.5.1
nx (global) : 20.4.6
nx : 20.1.4
@nx/js : 20.1.4
@nx/jest : 20.1.4
@nx/eslint : 20.1.4
@nx/workspace : 20.1.4
@nx/angular : 20.1.4
@nx/cypress : 20.1.4
@nx/devkit : 20.1.4
@nx/eslint-plugin : 20.1.4
@nx/plugin : 20.1.4
@nx/web : 20.1.4
@nx/webpack : 20.1.4
typescript : 5.4.5
Community plugins:
@koliveira15/nx-sonarqube : 2.2.0
@ng-bootstrap/ng-bootstrap : 17.0.1
@ngrx/effects : 18.1.1
@ngrx/entity : 18.1.1
@ngrx/operators : 18.0.1
@ngrx/router-store : 18.1.1
@ngrx/schematics : 18.1.1
@ngrx/store : 18.1.1
@ngrx/store-devtools : 18.1.1
ng-mocks : 14.13.2
ngx-toastr : 16.2.0
Local workspace plugins:
@luna/plugins
vbnet
Copy
Edit
Expected Behavior
The shell app should correctly load the respective remoteEntry.mjs for each remote app as defined in module.federation.manifest.json.
The behavior should be consistent regardless of whether the remotes are started before or after the shell app.
GitHub Repo
No response
Steps to Reproduce
After upgrade it happed before that all worked file
Nx Report
Node : 22.0.0
OS : win32-x64
Native Target : x86_64-windows
npm : 10.5.1
nx (global) : 20.4.6
nx : 20.1.4
@nx/js : 20.1.4
@nx/jest : 20.1.4
@nx/eslint : 20.1.4
@nx/workspace : 20.1.4
@nx/angular : 20.1.4
@nx/cypress : 20.1.4
@nx/devkit : 20.1.4
@nx/eslint-plugin : 20.1.4
@nx/plugin : 20.1.4
@nx/web : 20.1.4
@nx/webpack : 20.1.4
typescript : 5.4.5
---------------------------------------
Community plugins:
@koliveira15/nx-sonarqube : 2.2.0
@ng-bootstrap/ng-bootstrap : 17.0.1
@ngrx/effects : 18.1.1
@ngrx/entity : 18.1.1
@ngrx/operators : 18.0.1
@ngrx/router-store : 18.1.1
@ngrx/schematics : 18.1.1
@ngrx/store : 18.1.1
@ngrx/store-devtools : 18.1.1
ng-mocks : 14.13.2
ngx-toastr : 16.2.0
---------------------------------------
Local workspace plugins:
@luna/pluginsFailure Logs
Built 15 static remotes
NX Starting static remotes proxies...
NX Static remotes proxies started successfully
(node:9088) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 exit listeners added to [process]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)
(node:9088) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGTERM listeners added to [process]. Use emitter.setMaxListeners() to increase limit
Starting up http-server, serving C:\Projects\luna-mfe\tmp\static-remotes
http-server version: 14.1.1
http-server settings:
CORS: true
Cache: -1 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none
Available on:
http://localhost:4216
Hit CTRL-C to stop the server
- Generating browser application bundles (phase: setup)...
[ Module Federation Manifest Plugin ] Warn Manifest will use absolute path resolution via its host at runtime, reason: publicPath='auto'
(node:9088) [DEP0180] DeprecationWarning: fs.Stats constructor is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
NX All remotes started, server ready at http://localhost:4200Package Manager Version
No response
Operating System
- macOS
- Linux
- Windows
- Other (Please specify)
Additional Information
I cloned the Nx dynamic federation repo: https://github.com/Coly010/nx-ng-dyn-fed/tree/main and migrated it to Nx 20.1.4.
The only difference I noticed is that this repo exposes Router, whereas my project exposes Module.
Apart from that, everything else appears to be the same.