@nx/angular 0.0.0-pr-22870-d31b9b7 → 0.0.0-pr-26816-51699f9

package/migrations.json

@@ -1933,6 +1933,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "19.4.0-module-federation": {
+      "version": "19.4.0-rc.2",
+      "packages": {
+        "@module-federation/node": {
+          "version": "^2.3.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/ng-package.json

@@ -9,6 +9,7 @@
     "@nx/",
     "@angular-devkit",
     "@angular-eslint/",
+    "@module-federation/enhanced",
     "@schematics",
     "@phenomnomnominal/tsquery",
     "@typescript-eslint/",
@@ -20,12 +21,12 @@
     "ts-node",
     "tsconfig-paths",
     "semver",
-    "webpack",
     "http-server",
     "magic-string",
     "enquirer",
     "find-cache-dir",
-    "piscina"
+    "piscina",
+    "webpack"
   ],
   "keepLifecycleScripts": true
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "0.0.0-pr-22870-d31b9b7",
+  "version": "0.0.0-pr-26816-51699f9",
   "private": false,
   "description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n\n- Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, Playwright and Cypress. \n\n- Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -77,16 +77,17 @@
     "minimatch": "9.0.3",
     "semver": "^7.5.3",
     "tslib": "^2.3.0",
-    "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "0.0.0-pr-22870-d31b9b7",
-    "@nx/js": "0.0.0-pr-22870-d31b9b7",
-    "@nx/eslint": "0.0.0-pr-22870-d31b9b7",
-    "@nx/webpack": "0.0.0-pr-22870-d31b9b7",
-    "@nx/web": "0.0.0-pr-22870-d31b9b7",
-    "@nx/workspace": "0.0.0-pr-22870-d31b9b7",
+    "webpack": "^5.88.0",
+    "@module-federation/enhanced": "~0.2.3",
+    "@nx/devkit": "0.0.0-pr-26816-51699f9",
+    "@nx/js": "0.0.0-pr-26816-51699f9",
+    "@nx/eslint": "0.0.0-pr-26816-51699f9",
+    "@nx/webpack": "0.0.0-pr-26816-51699f9",
+    "@nx/web": "0.0.0-pr-26816-51699f9",
+    "@nx/workspace": "0.0.0-pr-26816-51699f9",
     "piscina": "^4.4.0",
-    "@nrwl/angular": "0.0.0-pr-22870-d31b9b7"
+    "@nrwl/angular": "0.0.0-pr-26816-51699f9"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 16.0.0 < 19.0.0",

package/src/builders/module-federation-dev-ssr/module-federation-dev-ssr.impl.js

@@ -36,6 +36,8 @@ function executeModuleFederationDevSSRBuilder(schema, context) {
         : Array.isArray(options.devRemotes)
             ? options.devRemotes
             : [options.devRemotes];
+    // Set NX_MF_DEV_REMOTES for the Nx Runtime Library Control Plugin
+    process.env.NX_MF_DEV_REMOTES = JSON.stringify(devServeRemotes);
     (0, module_federation_1.validateDevRemotes)({ devRemotes: devServeRemotes }, workspaceProjects);
     const remotesToSkip = new Set(options.skipRemotes ?? []);
     const staticRemotes = (0, module_federation_1.getStaticRemotes)(project, context, workspaceProjects, remotesToSkip);

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -62,6 +62,8 @@ async function* moduleFederationDevServerExecutor(schema, context) {
         projectGraph: context.projectGraph,
         root: context.root,
     }, pathToManifestFile);
+    // Set NX_MF_DEV_REMOTES for the Nx Runtime Library Control Plugin
+    process.env.NX_MF_DEV_REMOTES = JSON.stringify(remotes.devRemotes.map((r) => (typeof r === 'string' ? r : r.remoteName)));
     if (remotes.devRemotes.length > 0 && !schema.staticRemotesPort) {
         options.staticRemotesPort = options.devRemotes.reduce((portToUse, r) => {
             const remoteName = typeof r === 'string' ? r : r.remoteName;

package/src/generators/host/lib/update-ssr-setup.js

@@ -26,6 +26,12 @@ async function updateSsrSetup(tree, options, appName, typescriptConfiguration) {
     project.targets.server.options.customWebpackConfig = {
         path: (0, devkit_1.joinPathFragments)(project.root, `webpack.server.config.${pathToTemplateFiles}`),
     };
+    if (project.targets.server.configurations &&
+        project.targets.server.configurations.development) {
+        if ('vendorChunk' in project.targets.server.configurations.development) {
+            delete project.targets.server.configurations.development.vendorChunk;
+        }
+    }
     project.targets['serve-ssr'].executor =
         '@nx/angular:module-federation-dev-ssr';
     (0, devkit_1.updateProjectConfiguration)(tree, appName, project);

package/src/generators/remote/lib/update-ssr-setup.js

@@ -36,6 +36,12 @@ async function updateSsrSetup(tree, { appName, port, standalone, typescriptConfi
     project.targets.server.options.customWebpackConfig = {
         path: (0, devkit_1.joinPathFragments)(project.root, `webpack.server.config.${typescriptConfiguration ? 'ts' : 'js'}`),
     };
+    if (project.targets.server.configurations &&
+        project.targets.server.configurations.development) {
+        if ('vendorChunk' in project.targets.server.configurations.development) {
+            delete project.targets.server.configurations.development.vendorChunk;
+        }
+    }
     project.targets['serve-ssr'].options = {
         ...(project.targets['serve-ssr'].options ?? {}),
         port,

package/src/generators/setup-mf/setup-mf.js

@@ -19,7 +19,11 @@ async function setupMf(tree, rawOptions) {
         (0, lib_1.removeDeadCodeFromRemote)(tree, options);
         (0, lib_1.setupTspathForRemote)(tree, options);
         if (!options.skipPackageJson) {
-            installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/web': versions_1.nxVersion, '@nx/webpack': versions_1.nxVersion });
+            installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+                '@nx/web': versions_1.nxVersion,
+                '@nx/webpack': versions_1.nxVersion,
+                '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion,
+            });
         }
     }
     const remotesWithPorts = (0, lib_1.getRemotesWithPorts)(tree, options);
@@ -39,7 +43,10 @@ async function setupMf(tree, rawOptions) {
             });
         }
         if (!options.skipPackageJson) {
-            installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/webpack': versions_1.nxVersion });
+            installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+                '@nx/webpack': versions_1.nxVersion,
+                '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion,
+            });
         }
     }
     (0, lib_1.fixBootstrap)(tree, projectConfig.root, options);

package/src/generators/utils/add-mf-env-to-inputs.js

@@ -5,7 +5,7 @@ const devkit_1 = require("@nx/devkit");
 function addMfEnvToTargetDefaultInputs(tree) {
     const nxJson = (0, devkit_1.readNxJson)(tree);
     const webpackExecutor = '@nx/angular:webpack-browser';
-    const mfEnvVar = 'NX_MF_DEV_SERVER_STATIC_REMOTES';
+    const mfEnvVar = 'NX_MF_DEV_REMOTES';
     nxJson.targetDefaults ??= {};
     nxJson.targetDefaults[webpackExecutor] ??= {};
     nxJson.targetDefaults[webpackExecutor].inputs ??= [

package/src/utils/backward-compatible-versions.js

@@ -17,7 +17,8 @@ exports.backwardCompatibleVersions = {
         expressVersion: '~4.18.2',
         typesExpressVersion: '4.17.14',
         browserSyncVersion: '^3.0.0',
-        moduleFederationNodeVersion: '~1.0.5',
+        moduleFederationNodeVersion: '~2.3.0',
+        moduleFederationEnhancedVersion: '~0.2.3',
         angularEslintVersion: '~16.0.0',
         tailwindVersion: '^3.0.2',
         postcssVersion: '^8.4.5',
@@ -43,7 +44,8 @@ exports.backwardCompatibleVersions = {
         expressVersion: '~4.18.2',
         typesExpressVersion: '4.17.14',
         browserSyncVersion: '^3.0.0',
-        moduleFederationNodeVersion: '~1.0.5',
+        moduleFederationNodeVersion: '~2.3.0',
+        moduleFederationEnhancedVersion: '~0.2.3',
         angularEslintVersion: '~17.3.0',
         tailwindVersion: '^3.0.2',
         postcssVersion: '^8.4.5',

package/src/utils/mf/with-module-federation-ssr.d.ts

@@ -1,2 +1,2 @@
-import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
-export declare function withModuleFederationForSSR(options: ModuleFederationConfig): Promise<(config: any) => any>;
+import type { ModuleFederationConfig, NxModuleFederationConfigOverride } from '@nx/webpack/src/utils/module-federation';
+export declare function withModuleFederationForSSR(options: ModuleFederationConfig, configOverride?: NxModuleFederationConfigOverride): Promise<(config: any) => any>;

package/src/utils/mf/with-module-federation-ssr.js

@@ -2,48 +2,69 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederationForSSR = void 0;
 const utils_1 = require("./utils");
-async function withModuleFederationForSSR(options) {
+async function withModuleFederationForSSR(options, configOverride) {
     if (global.NX_GRAPH_CREATION) {
         return (config) => config;
     }
+    options.useNxLibraryControlPlugin ??= true;
     const { sharedLibraries, sharedDependencies, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options, {
         isServer: true,
     });
-    return (config) => ({
-        ...(config ?? {}),
-        target: false,
-        output: {
-            ...(config.output ?? {}),
-            uniqueName: options.name,
-        },
-        optimization: {
-            ...(config.optimization ?? {}),
-            runtimeChunk: false,
-        },
-        resolve: {
-            ...(config.resolve ?? {}),
-            alias: {
-                ...(config.resolve?.alias ?? {}),
-                ...sharedLibraries.getAliases(),
+    return (config) => {
+        const updatedConfig = {
+            ...(config ?? {}),
+            target: false,
+            output: {
+                ...(config.output ?? {}),
+                uniqueName: options.name,
             },
-        },
-        plugins: [
-            ...(config.plugins ?? []),
-            new (require('@module-federation/node').UniversalFederationPlugin)({
-                name: options.name,
-                filename: 'remoteEntry.js',
-                exposes: options.exposes,
-                remotes: mappedRemotes,
-                shared: {
-                    ...sharedDependencies,
-                },
-                library: {
-                    type: 'commonjs-module',
+            optimization: {
+                ...(config.optimization ?? {}),
+                runtimeChunk: false,
+            },
+            resolve: {
+                ...(config.resolve ?? {}),
+                alias: {
+                    ...(config.resolve?.alias ?? {}),
+                    ...sharedLibraries.getAliases(),
                 },
-                isServer: true,
-            }, {}),
-            sharedLibraries.getReplacementPlugin(),
-        ],
-    });
+            },
+            plugins: [
+                ...(config.plugins ?? []),
+                new (require('@module-federation/node').UniversalFederationPlugin)({
+                    name: options.name,
+                    filename: 'remoteEntry.js',
+                    exposes: options.exposes,
+                    remotes: mappedRemotes,
+                    shared: {
+                        ...sharedDependencies,
+                    },
+                    library: {
+                        type: 'commonjs-module',
+                    },
+                    isServer: true,
+                    /**
+                     * Apply user-defined config override
+                     */
+                    ...(configOverride ? configOverride : {}),
+                    runtimePlugins: process.env.NX_MF_DEV_REMOTES && options.useNxLibraryControlPlugin
+                        ? [
+                            ...(configOverride?.runtimePlugins ?? []),
+                            require.resolve('@nx/webpack/src/utils/module-federation/plugins/runtime-library-control.plugin.js'),
+                        ]
+                        : configOverride?.runtimePlugins,
+                }, {}),
+                sharedLibraries.getReplacementPlugin(),
+            ],
+        };
+        if (process.env.NX_MF_DEV_REMOTES && options.useNxLibraryControlPlugin) {
+            // The env var is only set from the module-federation-dev-server
+            // Attach the runtime plugin
+            updatedConfig.plugins.push(new (require('webpack').DefinePlugin)({
+                'process.env.NX_MF_DEV_REMOTES': process.env.NX_MF_DEV_REMOTES,
+            }));
+        }
+        return updatedConfig;
+    };
 }
 exports.withModuleFederationForSSR = withModuleFederationForSSR;

package/src/utils/mf/with-module-federation.d.ts

@@ -1,2 +1,2 @@
-import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
-export declare function withModuleFederation(options: ModuleFederationConfig): Promise<(config: any) => any>;
+import type { ModuleFederationConfig, NxModuleFederationConfigOverride } from '@nx/webpack/src/utils/module-federation';
+export declare function withModuleFederation(options: ModuleFederationConfig, configOverride?: NxModuleFederationConfigOverride): Promise<(config: any) => any>;

package/src/utils/mf/with-module-federation.js

@@ -1,52 +1,72 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederation = void 0;
-const tslib_1 = require("tslib");
 const utils_1 = require("./utils");
-const ModuleFederationPlugin_1 = tslib_1.__importDefault(require("webpack/lib/container/ModuleFederationPlugin"));
-async function withModuleFederation(options) {
+const webpack_1 = require("@module-federation/enhanced/webpack");
+async function withModuleFederation(options, configOverride) {
     if (global.NX_GRAPH_CREATION) {
         return (config) => config;
     }
+    options.useNxLibraryControlPlugin ??= true;
     const { sharedLibraries, sharedDependencies, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options);
-    return (config) => ({
-        ...(config ?? {}),
-        output: {
-            ...(config.output ?? {}),
-            uniqueName: options.name,
-            publicPath: 'auto',
-        },
-        optimization: {
-            ...(config.optimization ?? {}),
-            runtimeChunk: false,
-        },
-        resolve: {
-            ...(config.resolve ?? {}),
-            alias: {
-                ...(config.resolve?.alias ?? {}),
-                ...sharedLibraries.getAliases(),
+    return (config) => {
+        const updatedConfig = {
+            ...(config ?? {}),
+            output: {
+                ...(config.output ?? {}),
+                uniqueName: options.name,
+                publicPath: 'auto',
             },
-        },
-        experiments: {
-            ...(config.experiments ?? {}),
-            outputModule: true,
-        },
-        plugins: [
-            ...(config.plugins ?? []),
-            new ModuleFederationPlugin_1.default({
-                name: options.name,
-                filename: 'remoteEntry.mjs',
-                exposes: options.exposes,
-                remotes: mappedRemotes,
-                shared: {
-                    ...sharedDependencies,
-                },
-                library: {
-                    type: 'module',
+            optimization: {
+                ...(config.optimization ?? {}),
+                runtimeChunk: false,
+            },
+            resolve: {
+                ...(config.resolve ?? {}),
+                alias: {
+                    ...(config.resolve?.alias ?? {}),
+                    ...sharedLibraries.getAliases(),
                 },
-            }),
-            sharedLibraries.getReplacementPlugin(),
-        ],
-    });
+            },
+            experiments: {
+                ...(config.experiments ?? {}),
+                outputModule: true,
+            },
+            plugins: [
+                ...(config.plugins ?? []),
+                new webpack_1.ModuleFederationPlugin({
+                    name: options.name,
+                    filename: 'remoteEntry.mjs',
+                    exposes: options.exposes,
+                    remotes: mappedRemotes,
+                    shared: {
+                        ...sharedDependencies,
+                    },
+                    library: {
+                        type: 'module',
+                    },
+                    /**
+                     * Apply user-defined config override
+                     */
+                    ...(configOverride ? configOverride : {}),
+                    runtimePlugins: process.env.NX_MF_DEV_REMOTES && options.useNxLibraryControlPlugin
+                        ? [
+                            ...(configOverride?.runtimePlugins ?? []),
+                            require.resolve('@nx/webpack/src/utils/module-federation/plugins/runtime-library-control.plugin.js'),
+                        ]
+                        : configOverride?.runtimePlugins,
+                }),
+                sharedLibraries.getReplacementPlugin(),
+            ],
+        };
+        if (process.env.NX_MF_DEV_REMOTES && options.useNxLibraryControlPlugin) {
+            // The env var is only set from the module-federation-dev-server
+            // Attach the runtime plugin
+            updatedConfig.plugins.push(new (require('webpack').DefinePlugin)({
+                'process.env.NX_MF_DEV_REMOTES': process.env.NX_MF_DEV_REMOTES,
+            }));
+        }
+        return updatedConfig;
+    };
 }
 exports.withModuleFederation = withModuleFederation;

package/src/utils/versions.d.ts

@@ -12,7 +12,8 @@ export declare const typesCorsVersion = "~2.8.5";
 export declare const expressVersion = "~4.18.2";
 export declare const typesExpressVersion = "4.17.14";
 export declare const browserSyncVersion = "^3.0.0";
-export declare const moduleFederationNodeVersion = "~1.0.5";
+export declare const moduleFederationNodeVersion = "^2.3.0";
+export declare const moduleFederationEnhancedVersion = "~0.2.3";
 export declare const angularEslintVersion = "^18.0.1";
 export declare const typescriptEslintVersion = "^8.0.0-alpha.28";
 export declare const tailwindVersion = "^3.0.2";

package/src/utils/versions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.jsoncEslintParserVersion = exports.jasmineMarblesVersion = exports.typesNodeVersion = exports.jestPresetAngularVersion = exports.tsNodeVersion = exports.autoprefixerVersion = exports.postcssUrlVersion = exports.postcssVersion = exports.tailwindVersion = exports.typescriptEslintVersion = exports.angularEslintVersion = exports.moduleFederationNodeVersion = exports.browserSyncVersion = exports.typesExpressVersion = exports.expressVersion = exports.typesCorsVersion = exports.corsVersion = exports.tsLibVersion = exports.angularJsVersion = exports.zoneJsVersion = exports.rxjsVersion = exports.ngrxVersion = exports.ngPackagrVersion = exports.angularDevkitVersion = exports.angularVersion = exports.nxVersion = void 0;
+exports.jsoncEslintParserVersion = exports.jasmineMarblesVersion = exports.typesNodeVersion = exports.jestPresetAngularVersion = exports.tsNodeVersion = exports.autoprefixerVersion = exports.postcssUrlVersion = exports.postcssVersion = exports.tailwindVersion = exports.typescriptEslintVersion = exports.angularEslintVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.browserSyncVersion = exports.typesExpressVersion = exports.expressVersion = exports.typesCorsVersion = exports.corsVersion = exports.tsLibVersion = exports.angularJsVersion = exports.zoneJsVersion = exports.rxjsVersion = exports.ngrxVersion = exports.ngPackagrVersion = exports.angularDevkitVersion = exports.angularVersion = exports.nxVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
 exports.angularVersion = '~18.0.0';
 exports.angularDevkitVersion = '~18.0.0';
@@ -15,7 +15,8 @@ exports.typesCorsVersion = '~2.8.5';
 exports.expressVersion = '~4.18.2';
 exports.typesExpressVersion = '4.17.14';
 exports.browserSyncVersion = '^3.0.0';
-exports.moduleFederationNodeVersion = '~1.0.5';
+exports.moduleFederationNodeVersion = '^2.3.0';
+exports.moduleFederationEnhancedVersion = '~0.2.3';
 exports.angularEslintVersion = '^18.0.1';
 exports.typescriptEslintVersion = '^8.0.0-alpha.28';
 exports.tailwindVersion = '^3.0.2';