feat(module-federation): use module-federation runtime for dynamic federation

e2e/react/src/react-module-federation.rspack.test.ts

@@ -1189,7 +1189,7 @@ describe('React Rspack Module Federation', () => {
         `${shell}/src/assets/module-federation.manifest.json`,
         (json) => {
           return {
-            [remote]: `http://localhost:${remotePort}`,
+            [remote]: `http://localhost:${remotePort}/mf-manifest.json`,
           };
         }
       );
@@ -1198,7 +1198,9 @@ describe('React Rspack Module Federation', () => {
         `${shell}/src/assets/module-federation.manifest.json`
       );
       expect(manifest[remote]).toBeDefined();
-      expect(manifest[remote]).toEqual('http://localhost:4205');
+      expect(manifest[remote]).toEqual(
+        'http://localhost:4205/mf-manifest.json'
+      );
 
       // update e2e
       updateFile(

e2e/react/src/react-module-federation.test.ts

@@ -1015,7 +1015,7 @@ describe('React Module Federation', () => {
         `${shell}/src/assets/module-federation.manifest.json`,
         (json) => {
           return {
-            [remote]: `http://localhost:${remotePort}`,
+            [remote]: `http://localhost:${remotePort}/mf-manifest.json`,
           };
         }
       );
@@ -1024,7 +1024,9 @@ describe('React Module Federation', () => {
         `${shell}/src/assets/module-federation.manifest.json`
       );
       expect(manifest[remote]).toBeDefined();
-      expect(manifest[remote]).toEqual('http://localhost:4205');
+      expect(manifest[remote]).toEqual(
+        'http://localhost:4205/mf-manifest.json'
+      );
 
       // update e2e
       updateFile(

packages/angular/mf/mf.ts

@@ -7,6 +7,9 @@ declare const __webpack_share_scopes__: { default: unknown };
 
 let resolveRemoteUrl: ResolveRemoteUrlFunction;
 
+/**
+ * @deprecated Use Runtime Helpers from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
+ */
 export function setRemoteUrlResolver(
   _resolveRemoteUrl: ResolveRemoteUrlFunction
 ) {
@@ -15,10 +18,56 @@ export function setRemoteUrlResolver(
 
 let remoteUrlDefinitions: Record<string, string>;
 
+/**
+ * @deprecated Use init() from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
+ * If you have a remote app called `my-remote-app` and you want to use the `http://localhost:4201/mf-manifest.json` as the remote url, you should change it from:
+ * ```ts
+ * import { setRemoteDefinitions } from '@nx/angular/mf';
+ *
+ * setRemoteDefinitions({
+ *   'my-remote-app': 'http://localhost:4201/mf-manifest.json'
+ * });
+ * ```
+ * to use init():
+ * ```ts
+ * import { init } from '@module-federation/enhanced/runtime';
+ *
+ * init({
+ *   name: 'host',
+ *   remotes: [{
+ *     name: 'my-remote-app',
+ *     entry: 'http://localhost:4201/mf-manifest.json'
+ *   }]
+ * });
+ * ```
+ */
 export function setRemoteDefinitions(definitions: Record<string, string>) {
   remoteUrlDefinitions = definitions;
 }
 
+/**
+ * @deprecated Use registerRemotes() from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
+ * If you set a remote app with `setRemoteDefinition` such as:
+ * ```ts
+ * import { setRemoteDefinition } from '@nx/angular/mf';
+ *
+ * setRemoteDefinition(
+ *   'my-remote-app',
+ *   'http://localhost:4201/mf-manifest.json'
+ * );
+ * ```
+ * change it to use registerRemotes():
+ * ```ts
+ * import { registerRemotes } from '@module-federation/enhanced/runtime';
+ *
+ * registerRemotes([
+ *  {
+ *     name: 'my-remote-app',
+ *     entry: 'http://localhost:4201/mf-manifest.json'
+ *   }
+ * ]);
+ * ```
+ */
 export function setRemoteDefinition(remoteName: string, remoteUrl: string) {
   remoteUrlDefinitions ??= {};
   remoteUrlDefinitions[remoteName] = remoteUrl;
@@ -27,6 +76,21 @@ export function setRemoteDefinition(remoteName: string, remoteUrl: string) {
 let remoteModuleMap = new Map<string, unknown>();
 let remoteContainerMap = new Map<string, unknown>();
 
+/**
+ * @deprecated Use loadRemote() from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
+ * If you set a load a remote with `loadRemoteModule` such as:
+ * ```ts
+ * import { loadRemoteModule } from '@nx/angular/mf';
+ *
+ * loadRemoteModule('my-remote-app', './Module').then(m => m.RemoteEntryModule);
+ * ```
+ * change it to use loadRemote():
+ * ```ts
+ * import { loadRemote } from '@module-federation/enhanced/runtime';
+ *
+ * loadRemote<typeof import('my-remote-app/Module')>('my-remote-app/Module').then(m => m.RemoteEntryModule);
+ * ```
+ */
 export async function loadRemoteModule(remoteName: string, moduleName: string) {
   const remoteModuleKey = `${remoteName}:${moduleName}`;
   if (remoteModuleMap.has(remoteModuleKey)) {

packages/angular/src/generators/setup-mf/__snapshots__/setup-mf.spec.ts.snap

@@ -1,32 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Init MF --federationType=dynamic should create a host with the correct configurations 1`] = `
-"import { setRemoteDefinitions } from '@nx/angular/mf';
+"import { init } from '@module-federation/enhanced/runtime';
 
 fetch('/module-federation.manifest.json')
   .then((res) => res.json())
-  .then(definitions => setRemoteDefinitions(definitions))
+  .then((remotes: Record<string, string>) => Object.entries(remotes).map(([name, entry]) => ({ name,entry})))
+  .then(remotes => init({name: 'app1', remotes}))
   .then(() => import('./bootstrap').catch(err => console.error(err)));"
 `;
 
 exports[`Init MF --federationType=dynamic should create a host with the correct configurations when --typescriptConfiguration=true 1`] = `
-"import { setRemoteDefinitions } from '@nx/angular/mf';
+"import { init } from '@module-federation/enhanced/runtime';
 
 fetch('/module-federation.manifest.json')
   .then((res) => res.json())
-  .then(definitions => setRemoteDefinitions(definitions))
+  .then((remotes: Record<string, string>) => Object.entries(remotes).map(([name, entry]) => ({ name,entry})))
+  .then(remotes => init({name: 'app1', remotes}))
   .then(() => import('./bootstrap').catch(err => console.error(err)));"
 `;
 
 exports[`Init MF --federationType=dynamic should wire up existing remote to dynamic host correctly 1`] = `
 "import { NxWelcomeComponent } from './nx-welcome.component';
 import { Route } from '@angular/router';
-import { loadRemoteModule } from '@nx/angular/mf';
+import { loadRemote } from '@module-federation/enhanced/runtime';
 
 export const appRoutes: Route[] = [
     {
     path: 'remote1',
-    loadChildren: () => loadRemoteModule('remote1', './Module').then(m => m.RemoteEntryModule)
+    loadChildren: () => loadRemote<typeof import('remote1/Module')>('remote1/Module').then(m => m!.RemoteEntryModule)
     },
     {
       path: '',
@@ -38,12 +40,12 @@ export const appRoutes: Route[] = [
 exports[`Init MF --federationType=dynamic should wire up existing remote to dynamic host correctly when --typescriptConfiguration=true 1`] = `
 "import { NxWelcomeComponent } from './nx-welcome.component';
 import { Route } from '@angular/router';
-import { loadRemoteModule } from '@nx/angular/mf';
+import { loadRemote } from '@module-federation/enhanced/runtime';
 
 export const appRoutes: Route[] = [
     {
     path: 'remote1',
-    loadChildren: () => loadRemoteModule('remote1', './Module').then(m => m.RemoteEntryModule)
+    loadChildren: () => loadRemote<typeof import('remote1/Module')>('remote1/Module').then(m => m!.RemoteEntryModule)
     },
     {
       path: '',
@@ -59,11 +61,11 @@ import { Route } from '@angular/router';
 export const appRoutes: Route[] = [
     {
     path: 'remote2',
-    loadChildren: () => import('remote2/Module').then(m => m.RemoteEntryModule)
+    loadChildren: () => import('remote2/Module').then(m => m!.RemoteEntryModule)
     },
     {
     path: 'remote1',
-    loadChildren: () => import('remote1/Module').then(m => m.RemoteEntryModule)
+    loadChildren: () => import('remote1/Module').then(m => m!.RemoteEntryModule)
     },
     {
       path: '',
@@ -175,12 +177,12 @@ export default config;
 exports[`Init MF should add a remote to dynamic host correctly 1`] = `
 "import { NxWelcomeComponent } from './nx-welcome.component';
 import { Route } from '@angular/router';
-import { loadRemoteModule } from '@nx/angular/mf';
+import { loadRemote } from '@module-federation/enhanced/runtime';
 
 export const appRoutes: Route[] = [
     {
     path: 'remote1',
-    loadChildren: () => loadRemoteModule('remote1', './Module').then(m => m.RemoteEntryModule)
+    loadChildren: () => loadRemote<typeof import('remote1/Module')>('remote1/Module').then(m => m!.RemoteEntryModule)
     },
     {
       path: '',
@@ -192,12 +194,12 @@ export const appRoutes: Route[] = [
 exports[`Init MF should add a remote to dynamic host correctly when --typescriptConfiguration=true 1`] = `
 "import { NxWelcomeComponent } from './nx-welcome.component';
 import { Route } from '@angular/router';
-import { loadRemoteModule } from '@nx/angular/mf';
+import { loadRemote } from '@module-federation/enhanced/runtime';
 
 export const appRoutes: Route[] = [
     {
     path: 'remote1',
-    loadChildren: () => loadRemoteModule('remote1', './Module').then(m => m.RemoteEntryModule)
+    loadChildren: () => loadRemote<typeof import('remote1/Module')>('remote1/Module').then(m => m!.RemoteEntryModule)
     },
     {
       path: '',

packages/angular/src/generators/setup-mf/lib/add-remote-to-host.ts

@@ -47,7 +47,12 @@ export function addRemoteToHost(tree: Tree, options: AddRemoteOptions) {
         isHostUsingTypescriptConfig
       );
     } else if (hostFederationType === 'dynamic') {
-      addRemoteToDynamicHost(tree, options, pathToMFManifest);
+      addRemoteToDynamicHost(
+        tree,
+        options,
+        pathToMFManifest,
+        hostProject.sourceRoot
+      );
     }
 
     addLazyLoadedRouteToHostAppModule(tree, options, hostFederationType);
@@ -114,17 +119,23 @@ function addRemoteToStaticHost(
 function addRemoteToDynamicHost(
   tree: Tree,
   options: AddRemoteOptions,
-  pathToMfManifest: string
+  pathToMfManifest: string,
+  hostSourceRoot: string
 ) {
+  // TODO(Colum): Remove for Nx 22
+  const usingLegacyDynamicFederation = tree
+    .read(`${hostSourceRoot}/main.ts`, 'utf-8')
+    .includes('setRemoteDefinitions(');
   updateJson(tree, pathToMfManifest, (manifest) => {
     return {
       ...manifest,
-      [options.appName]: `http://localhost:${options.port}`,
+      [options.appName]: `http://localhost:${options.port}${
+        usingLegacyDynamicFederation ? '' : '/mf-manifest.json'
+      }`,
     };
   });
 }
 
-// TODO(colum): future work: allow dev to pass to path to routing module
 function addLazyLoadedRouteToHostAppModule(
   tree: Tree,
   options: AddRemoteOptions,
@@ -150,34 +161,49 @@ function addLazyLoadedRouteToHostAppModule(
     true
   );
 
+  // TODO(Colum): Remove for Nx 22
+  const usingLegacyDynamicFederation =
+    hostFederationType === 'dynamic' &&
+    tree
+      .read(`${hostAppConfig.sourceRoot}/main.ts`, 'utf-8')
+      .includes('setRemoteDefinitions(');
+
   if (hostFederationType === 'dynamic') {
     sourceFile = insertImport(
       tree,
       sourceFile,
       pathToHostRootRouting,
-      'loadRemoteModule',
-      '@nx/angular/mf'
+      usingLegacyDynamicFederation ? 'loadRemoteModule' : 'loadRemote',
+      usingLegacyDynamicFederation
+        ? '@nx/angular/mf'
+        : '@module-federation/enhanced/runtime'
     );
   }
 
   const routePathName = options.standalone ? 'Routes' : 'Module';
   const exportedRemote = options.standalone
     ? 'remoteRoutes'
     : 'RemoteEntryModule';
+  const remoteModulePath = `${options.appName.replace(
+    /-/g,
+    '_'
+  )}/${routePathName}`;
   const routeToAdd =
     hostFederationType === 'dynamic'
-      ? `loadRemoteModule('${options.appName.replace(
-          /-/g,
-          '_'
-        )}', './${routePathName}')`
-      : `import('${options.appName.replace(/-/g, '_')}/${routePathName}')`;
+      ? usingLegacyDynamicFederation
+        ? `loadRemoteModule('${options.appName.replace(
+            /-/g,
+            '_'
+          )}', './${routePathName}')`
+        : `loadRemote<typeof import('${remoteModulePath}')>('${remoteModulePath}')`
+      : `import('${remoteModulePath}')`;
 
   addRoute(
     tree,
     pathToHostRootRouting,
     `{
     path: '${options.appName}',
-    loadChildren: () => ${routeToAdd}.then(m => m.${exportedRemote})
+    loadChildren: () => ${routeToAdd}.then(m => m!.${exportedRemote})
     }`
   );
 

packages/angular/src/generators/setup-mf/lib/fix-bootstrap.ts

@@ -23,11 +23,12 @@ export function fixBootstrap(tree: Tree, appRoot: string, options: Schema) {
       manifestPath = '/module-federation.manifest.json';
     }
 
-    const fetchMFManifestCode = `import { setRemoteDefinitions } from '@nx/angular/mf';
+    const fetchMFManifestCode = `import { init } from '@module-federation/enhanced/runtime';
 
 fetch('${manifestPath}')
   .then((res) => res.json())
-  .then(definitions => setRemoteDefinitions(definitions))
+  .then((remotes: Record<string, string>) => Object.entries(remotes).map(([name, entry]) => ({ name,entry})))
+  .then(remotes => init({name: '${options.appName}', remotes}))
   .then(() => ${bootstrapImportCode});`;
 
     tree.write(mainFilePath, fetchMFManifestCode);

packages/angular/src/generators/setup-mf/setup-mf.spec.ts

@@ -574,7 +574,7 @@ describe('Init MF', () => {
       expect(
         readJson(tree, 'app1/public/module-federation.manifest.json')
       ).toEqual({
-        remote1: 'http://localhost:4201',
+        remote1: 'http://localhost:4201/mf-manifest.json',
       });
       expect(
         tree.read('app1/src/app/app.routes.ts', 'utf-8')
@@ -609,7 +609,7 @@ describe('Init MF', () => {
       expect(
         readJson(tree, 'app1/public/module-federation.manifest.json')
       ).toEqual({
-        remote1: 'http://localhost:4201',
+        remote1: 'http://localhost:4201/mf-manifest.json',
       });
       expect(
         tree.read('app1/src/app/app.routes.ts', 'utf-8')
@@ -648,7 +648,7 @@ describe('Init MF', () => {
     expect(
       readJson(tree, 'app1/public/module-federation.manifest.json')
     ).toEqual({
-      remote1: 'http://localhost:4201',
+      remote1: 'http://localhost:4201/mf-manifest.json',
     });
     expect(tree.read('app1/src/app/app.routes.ts', 'utf-8')).toMatchSnapshot();
   });
@@ -684,7 +684,7 @@ describe('Init MF', () => {
     expect(
       readJson(tree, 'app1/public/module-federation.manifest.json')
     ).toEqual({
-      remote1: 'http://localhost:4201',
+      remote1: 'http://localhost:4201/mf-manifest.json',
     });
     expect(tree.read('app1/src/app/app.routes.ts', 'utf-8')).toMatchSnapshot();
   });

packages/angular/src/generators/setup-mf/setup-mf.ts

@@ -45,11 +45,12 @@ export async function setupMf(tree: Tree, rawOptions: Schema) {
     if (!options.skipPackageJson) {
       installTask = addDependenciesToPackageJson(
         tree,
-        {},
+        {
+          '@module-federation/enhanced': moduleFederationEnhancedVersion,
+        },
         {
           '@nx/web': nxVersion,
           '@nx/webpack': nxVersion,
-          '@module-federation/enhanced': moduleFederationEnhancedVersion,
         }
       );
     }