Dynamic module federation doesn't work with proposed remote app manifest file

[hakalb]

Current Behavior

There has been a change to how static remotes are served when only a single http-server host all remotes, though each remote has its own port number. So 4200 relates to the host app and 4201 to all static remotes.

More port numbers are only used when we start serving one or more remotes in dev mode. Then we could have 4200 still for the host app but 4201 serves remote1 in dev mode and 4202 serves the static remotes.

For me using dynamic module federation the remote manifest file module-federation.manifest.json isn't as predictable as I'm used to anymore.

When I serve my host app with static remotes the remote entry files can not be found since all remotes are served from a single port, requiring additional app folder in the path.

I recently updated from 16 to 18.

Expected Behavior

Serving host app with either static or dev remotes should be able to work with a predictable manifest file.

GitHub Repo

No response

Steps to Reproduce

Generate host and remotes from example code
https://nx.dev/recipes/module-federation/create-a-host#scaffold-a-host-with-remotes

nx g @nx/angular:host shell --directory=apps/mfe-dyn/shell --remotes=remote1,remote2 --dynamic 

Generated module-federation.manifest.json

{
  "remote1": "http://localhost:4201",
  "remote2": "http://localhost:4202"
}

This configuration works well for remotes in dev mode since they both are served on their individual ports

nx serve shell --devRemotes remote1,remote2

But when serving static remotes they both are served on 4201 from dist/apps/mfe-dyn, which doesn't work anymore

nx serve shell

None of the remotes are found. For this scenario the manifest must look like this:

{
  "remote1": "http://localhost:4201/remote1",
  "remote2": "http://localhost:4201/remote2"
}

So how should I configure my manifest file to be predictable and dynamic enough for both static and dev remotes?

Nx Report

nx report

 >  NX   Report complete - copy this into the issue template

   Node   : 20.11.0
   OS     : darwin-arm64
   yarn   : 3.4.1

   nx (global)        : 18.0.3
   nx                 : 18.0.4
   lerna              : 7.4.2
   @nx/js             : 18.0.4
   @nx/jest           : 18.0.4
   @nx/linter         : 18.0.4
   @nx/eslint         : 18.0.4
   @nx/workspace      : 18.0.4
   @nx/angular        : 18.0.4
   @nx/cypress        : 18.0.4
   @nx/devkit         : 18.0.4
   @nx/eslint-plugin  : 18.0.4
   @nx/plugin         : 18.0.4
   @nrwl/tao          : 18.0.4
   @nx/web            : 18.0.4
   @nx/webpack        : 18.0.4
   nx-cloud           : 18.0.0
   typescript         : 5.3.3
   ---------------------------------------
   Community plugins:
   @compodoc/compodoc       : 1.1.23
   @ngneat/hot-toast        : 5.0.2
   @ngneat/spectator        : 15.0.1
   @testing-library/angular : 14.5.1
   ng-apexcharts            : 1.9.0
   ng-mocks                 : 14.12.1
   ngx-ui-loader            : 13.0.0
   ---------------------------------------
   Local workspace plugins:
   	 @mx/workspace-plugin
   	 @mx/nx-plugin

Failure Logs

No response

Package Manager Version

No response

Operating System

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

Additional Information

No response

[jeffschulzusc]

hi ... any resolution on this ? thanks

[hakalb]

Since we're using setRemoteUrlResolver it's possible to dynamically generate the remote url for current remote.

Short version of our workaround. It works for us since we know that localhost and a port number always relates to development. Deployment environments never use ports.

// Host app bootstrap, e.g. `bootstrap.ts`

const staticRemotesPort = project.targets.serve.options.staticRemotesPort;

// We actually fetch this dynamically to utilize cache busting, e.g. `remoteEntry.{build-hash}.mjs`
const remoteEntryName = 'remoteEntry.mjs';

// Fetch environment config to get remote urls
fetch('environment.config.json').then((config) => {
  setRemoteUrlResolver((remote) =>
    urlResolver(
      remote,
      config.moduleFederationManifest[remote],
      remoteEntryName,
      staticRemotesPort
    )
  );

  ...

  bootstrapApplication(AppComponent, { providers: [ ... ] });
})
.catch( ... );

export const urlResolver = async (
  remoteName: string,
  remoteUrl: string,
  remoteEntryName: string,
  staticRemotesPort: number
): Promise<string> => {
  const url = `${remoteUrl}/${remoteEntryName}`;

  const devUrlRegex = /^(.*localhost:)(\d{4})$/;

  // Check whether remote url is from `serve` command or not
  if (!remoteUrl.match(devUrlRegex)) {
    return url;
  }

  // Check remote url
  return fetch(url)
    .then(() => {
      return url;
    })
    .catch(() => {
      console.warn(
        '[urlResolver] dev remote not running, assume a static remote'
      );

      // Map to static port and path
      // E.g. http://localhost:4201 --> http://localhost:4242/app-remote
      const staticRemoteUrl = `${remoteUrl.replace(
        devUrlRegex,
        `$${1}${staticRemotesPort}`
      )}/${remoteName}`;

      return `${staticRemoteUrl}/${remoteEntryName}`;
    });
};

[NickCiliak]

Also have this issue, preventing us from upgrading to 17.2.

[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.