search

nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
23.55k stars 2.35k forks source link

@nx/angular - Error serving multiple remotes at the same time #28479

Open imuricy opened 2 weeks ago

imuricy commented 2 weeks ago

Current Behavior

When trying to serve shell application with more than 1 remotes at the same time, only 1 remote will work. There is an issue serving remoteEntry.mjs file on one of the remotes

Expected Behavior

Both remotes should work, serving remoteEntry.mjs to inject routes for module federation.

GitHub Repo

No response

Steps to Reproduce

  1. npx create-nx-workspace@latest nx-test --preset=angular-monorepo
  2. nx g @nx/angular:host apps/home --prefix=nx-test --dynamic
  3. nx g @nx/angular:remote apps/mf1 --prefix=nx-test --host=home
  4. nx g @nx/angular:remote apps/mf2 --prefix=nx-test --host=home

ng serve home --devRemotes=mf1,mf2 or ng serve home --devRemotes="mf1,mf2"

Navigate between routes, only one MicroFront will work, the other ones fails to download remoteEntry.mjs

Nx Report

NX Report complete - copy this into the issue template

Node : 20.17.0 OS : linux-x64 Native Target : x86_64-linux npm : 10.8.3

nx (global) : 19.8.0 nx : 20.0.1 @nx/js : 20.0.1 @nx/jest : 20.0.1 @nx/eslint : 20.0.1 @nx/workspace : 20.0.1 @nx/angular : 20.0.1 @nx/devkit : 20.0.1 @nx/eslint-plugin : 20.0.1 @nx/web : 20.0.1 @nx/webpack : 20.0.1 typescript : 5.5.4

Failure Logs

http://localhost:4201/remoteEntry.mjs

HTTP/1.1 404 Not Found X-Powered-By: Express Access-Control-Allow-Origin: * Content-Security-Policy: default-src 'none' X-Content-Type-Options: nosniff Content-Type: text/html; charset=utf-8 Content-Length: 154 Date: Thu, 17 Oct 2024 02:56:31 GMT Connection: keep-alive Keep-Alive: timeout=5

Package Manager Version

No response

Operating System

Additional Information

Starting one remote at a time, works fine. The remotes served as static have the route to the remoteEntry.mjs file served.

The other contents of the remote app works just fine, app is rendered as expected when accessing via remote port.

alfonso-marcos-xeridia commented 1 week ago

I have the same problem.

Coly010 commented 3 days ago

I can't reproduce this on latest Nx (20.0.6).

Can you also make sure you're using the Nx CLI? I see you have been calling ng when you should be calling nx: ng serve home --devRemotes=mf1,mf2 or ng serve home --devRemotes="mf1,mf2"

Here's the repo I just created following your steps and using npx nx serve home --devRemotes=mf1,mf2: https://github.com/Coly010/nx-bug-28479