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.

[Osku]

Hello
I am doing with :

// main.ts
import { init } from '@module-federation/enhanced/runtime';

fetch('/env.json')
  .then((res) => res.json())
  .then((res) => res.REMOTES)
  .then((remotes: Record<string, string>) => Object.entries(remotes).map(([name, entry]) => ({ name, entry })))
  .then((remotes) => init({ name: 'digital-app', remotes }))
  .then(() => import('./bootstrap').catch((err) => console.error(err)));

My env.json :

{
  "REMOTES": {
    "remote-a": "http://localhost:4203/mf-manifest.json",
    "remote-b": "http://localhost:4204/mf-manifest.json",
    "remote-c": "http://localhost:4205/mf-manifest.json"
  }
}

And routes:

// app.routes.ts
import { loadRemote } from '@module-federation/enhanced/runtime';

export const appRoutes: Route[] = [
  {
    path: 'route-a',
    loadChildren: () => loadRemote<typeof import('remote-a/Routes')>('remote-a/Routes').then((m) => m!.remoteRoutes),
  },
  {
    path: 'route-b',
    loadChildren: () => loadRemote<typeof import('remote-b/Routes')>('remote-b/Routes').then((m) => m!.remoteRoutes),
  },
]

Hope it helps.