Module federation (hosts and remotes) not working as expected when using SSL and custom hosts.

[leonandroid]

Current Behavior

Hi, so i'm using nx from a long time specially with the host and remote features, I see several bugs that seems to be present and never fixed from so long, makes me realize nobody is fully using this feature, hope somebody can help with this.

When I create an app from scratch, it usually creates the initial app as a regular app. What I usually do is to delete that app and replace it with a HOST, then I create 2 or 3 remotes to test.

As soon as I complete this, I'm able to build and serve, and everything seems to work fine, you can see the example nx page, and the navigation to remotes works as expected.

Now do this, instead of leaving the app in the default settings, I need it to be in a ssl = true, and a public host and host should be something different than localhost (for auth purposes, I use a real url and I modify the HOST file on my machine to redirect to localhost).

After changing all of these settings, the build keeps working, but the serve gets broken.
You can see now that the HOST is the only one serving, the remotes does not start automatically like it would do it by default. You need to serve each remote manually one by one for it to work.

This makes me realize that something is missing in the configuration, ideally I would like to touch 0 things and the behavior should be the same than when I used localhost and SSL = false.

More important, I was using the old version of NX for Angular15, I recently changed to the 19 version, and this feature that was working properly in the v15, now is broken in the v19 with a brand new project.

Expected Behavior

When application with host and remotes are created for the first time, it serves properly and you are able to navigate to remotes with the example pages.

When you change the urls to use SSL and a custom host, the serve does not launch anymore the remotes, you need to launch one by one manually. It looks like it's not even building the remote dependencies.

GitHub Repo

No response

Steps to Reproduce

npx create-nx-workspace@latest

3. create host (I use UI for this, the result command is this)
   npx nx generate @nx/angular:host --name=host-landing-page --directory=apps/host-landing-page --e2eTestRunner=cypress --projectNameAndRootFormat=as-provided --standalone=false --style=scss --no-interactive

4. create remotes (I use UI for this, the result command is this)
   npx nx generate @nx/angular:remote --name=r-data-catalog --host=host-landing-page --e2eTestRunner=cypress --port=4201 --projectNameAndRootFormat=derived --standalone=false --style=scss --no-interactive

test- at this point, if you serve the app, it will navigate properly to host and remotes.
The serve will also launch the REMOTES. <-- totally expected.

5. file project Json of HOST and REMOTES, change the serve options to look like this, (use the expected port for HOST and remotes, like 4201, 4202 etc)

    "serve": {
      "executor": "@nx/angular:module-federation-dev-server",
      "options": {
        "disableHostCheck": true,
        "ssl": true,
        "port": 4200,
        "publicHost": "https://whatever.com:4200",
        "host": "whatever.com"
      },

6. Update your host file in your machine so "whatever.com" redirects to 127.0.0.1
   (This step is required and mandatory because I use azureAD, and as any other auth mecanism, the request must come from a valid URL to proceed with Auth, and to have localhost is not an option)

7. Serve the app.

At this point, the SERVE will launch just the HOST, and the remotes will stay turned off. So now I need to go one by one and serve one by one.

Extra:

Other things I modified to make this work

a) In the module-federation.config.ts I also added the remotes with full URL, just in case is losing something.

  remotes: [
    ['r-data-catalog',                                'https://qas.finbuddy.deloitte.com:4201']
  ]

b) int the project json file, Just in case I keep adding the "ImplicitDependencies" array, and include the remotes there so It understands they are related. I'm not sure if this is still required in the v19 version, in v15 without this nothing will work as expected.

"implicitDependencies": ["r-data-catalog"]

Nx Report

Node           : 18.20.4
OS             : win32-x64
Native Target  : x86_64-windows
npm            : 10.8.3

nx (global)        : 19.6.4
nx                 : 19.6.4
@nx/js             : 19.6.4
@nx/jest           : 19.6.4
@nx/linter         : 19.6.4
@nx/eslint         : 19.6.4
@nx/workspace      : 19.6.4
@nx/angular        : 19.6.4
@nx/cypress        : 19.6.4
@nx/devkit         : 19.6.4
@nx/eslint-plugin  : 19.6.4
@nrwl/tao          : 19.6.4
@nx/web            : 19.6.4
@nx/webpack        : 19.6.4
typescript         : 5.5.4
---------------------------------------
Registered Plugins:
@nx/cypress/plugin
@nx/eslint/plugin

Failure Logs

No response

Package Manager Version

npm 10.8.3

Operating System

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

Additional Information

No response

[Coly010]

Can you confirm if this is still an issue in Nx 20?

I note that it appears like others are not running into this issue, but it could still be an issue.