How to set up remotes with @module-federation instead of @nx/angular/mf?

[Chiorufarewerin]

I don't have SSR, and the host initializes remotes dynamically.

main.ts

import {setRemoteDefinitions} from '@nx/angular/mf';

setRemoteDefinitions({
    remote: `${window.APP_REMOTES.remote}/remoteEntry.mjs`,
});

import('./bootstrap').catch((err) => console.error(err));

When I try to use init from @module-federation/enhanced/runtime,
I'm getting errors because I don't have Node.js at browser runtime:

Error: node_modules/@module-federation/runtime-core/dist/src/global.d.ts:16:43 - error TS2304: Cannot find name 'global'.

16 export declare const nativeGlobal: typeof global;
                                             ~~~~~~


Error: node_modules/@module-federation/runtime-core/dist/src/helpers.d.ts:9:26 - error TS2304: Cannot find name 'global'.

9     nativeGlobal: typeof global;
                           ~~~~~~


Error: node_modules/webpack/types.d.ts:92:8 - error TS2307: Cannot find module 'http' or its corresponding type declarations.

92 } from "http";
          ~~~~~~


Error: node_modules/webpack/types.d.ts:93:39 - error TS2307: Cannot find module 'net' or its corresponding type declarations.

[Nsttt]

Hey !

We have an example with angular you can take a peak at https://github.com/ZephyrCloudIO/zephyr-examples/tree/main/examples/nx-ng

Does this helps ?

[Chiorufarewerin]

Hey, thank you for your response. I don't see any microfrontends with "@module-federation". Did you send the right example?

[Nsttt]

Hey hey !

Apologies, I thought that our Angular example had MF. We don't have any specific to Angular at the moment but some of them in the repo are microfrontends using module federation like our Tractor example here https://github.com/ZephyrCloudIO/zephyr-examples/tree/main/examples/react-rspack-tractor-2.0

It might help you figure the configuration 😄

[Chiorufarewerin]

Thank you. I see how remotes are set up here:

{
  "remotes": {
        tractor_v2_checkout: 'tractor_v2_checkout@http://localhost:3001/remoteEntry.js',
        tractor_v2_decide: 'tractor_v2_decide@http://localhost:3002/remoteEntry.js',
        tractor_v2_explore: 'tractor_v2_explore@http://localhost:3003/remoteEntry.js',
      }
}

These remote URLs are set up at compilation time. In my case, I don't know the exact URL—it is set up dynamically. Can I define http://localhost:3001/remoteEntry.js at runtime?

[ScriptedAlchemy]

if you use a runtimePlugin you can mutate the values in the init or beforeRequest hook