@nx/angular 19.5.0 → 19.6.0-canary.20240719-83b88a1

package/ng-package.json

@@ -21,11 +21,15 @@
     "ts-node",
     "tsconfig-paths",
     "semver",
+    "webpack",
+    "express",
+    "http-proxy-middleware",
     "http-server",
     "magic-string",
     "enquirer",
     "find-cache-dir",
-    "piscina"
+    "piscina",
+    "webpack"
   ],
   "keepLifecycleScripts": true
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "19.5.0",
+  "version": "19.6.0-canary.20240719-83b88a1",
   "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": {
@@ -78,15 +78,16 @@
     "semver": "^7.5.3",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
+    "webpack": "^5.88.0",
     "@module-federation/enhanced": "~0.2.3",
-    "@nx/devkit": "19.5.0",
-    "@nx/js": "19.5.0",
-    "@nx/eslint": "19.5.0",
-    "@nx/webpack": "19.5.0",
-    "@nx/web": "19.5.0",
-    "@nx/workspace": "19.5.0",
+    "@nx/devkit": "19.6.0-canary.20240719-83b88a1",
+    "@nx/js": "19.6.0-canary.20240719-83b88a1",
+    "@nx/eslint": "19.6.0-canary.20240719-83b88a1",
+    "@nx/webpack": "19.6.0-canary.20240719-83b88a1",
+    "@nx/web": "19.6.0-canary.20240719-83b88a1",
+    "@nx/workspace": "19.6.0-canary.20240719-83b88a1",
     "piscina": "^4.4.0",
-    "@nrwl/angular": "19.5.0"
+    "@nrwl/angular": "19.6.0-canary.20240719-83b88a1"
   },
   "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/lib/build-static-remotes.d.ts

@@ -1,4 +1,4 @@
 import { type Schema } from '../schema';
 import { type ExecutorContext } from '@nx/devkit';
-import type { StaticRemotesConfig } from './parse-static-remotes-config';
-export declare function buildStaticRemotes(staticRemotesConfig: StaticRemotesConfig, nxBin: any, context: ExecutorContext, options: Schema): Promise<void>;
+import type { StaticRemotesConfig } from '@nx/webpack/src/utils/module-federation/parse-static-remotes-config';
+export declare function buildStaticRemotes(staticRemotesConfig: StaticRemotesConfig, nxBin: any, context: ExecutorContext, options: Schema): Promise<Record<string, string>>;

package/src/executors/module-federation-dev-server/lib/build-static-remotes.js

@@ -14,7 +14,6 @@ async function buildStaticRemotes(staticRemotesConfig, nxBin, context, options)
     for (const app of staticRemotesConfig.remotes) {
         mappedLocationOfRemotes[app] = `http${options.ssl ? 's' : ''}://${options.host}:${options.staticRemotesPort}/${staticRemotesConfig.config[app].urlSegment}`;
     }
-    process.env.NX_MF_DEV_SERVER_STATIC_REMOTES = JSON.stringify(mappedLocationOfRemotes);
     await new Promise((res) => {
         devkit_1.logger.info(`NX Building ${staticRemotesConfig.remotes.length} static remotes...`);
         const staticProcess = (0, node_child_process_1.fork)(nxBin, [
@@ -55,4 +54,5 @@ async function buildStaticRemotes(staticRemotesConfig, nxBin, context, options)
         process.on('SIGTERM', () => staticProcess.kill('SIGTERM'));
         process.on('exit', () => staticProcess.kill('SIGTERM'));
     });
+    return mappedLocationOfRemotes;
 }

package/src/executors/module-federation-dev-server/lib/index.d.ts

@@ -1,5 +1,4 @@
 export * from './build-static-remotes';
 export * from './normalize-options';
-export * from './parse-static-remotes-config';
 export * from './start-dev-remotes';
 export * from './start-static-remotes-file-server';

package/src/executors/module-federation-dev-server/lib/index.js

@@ -3,6 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./build-static-remotes"), exports);
 tslib_1.__exportStar(require("./normalize-options"), exports);
-tslib_1.__exportStar(require("./parse-static-remotes-config"), exports);
 tslib_1.__exportStar(require("./start-dev-remotes"), exports);
 tslib_1.__exportStar(require("./start-static-remotes-file-server"), exports);

package/src/executors/module-federation-dev-server/lib/start-static-remotes-file-server.d.ts

@@ -1,6 +1,6 @@
 import { type ExecutorContext } from '@nx/devkit';
 import { type Schema } from '../schema';
-import type { StaticRemotesConfig } from './parse-static-remotes-config';
+import type { StaticRemotesConfig } from '@nx/webpack/src/utils/module-federation/parse-static-remotes-config';
 export declare function startStaticRemotesFileServer(staticRemotesConfig: StaticRemotesConfig, context: ExecutorContext, options: Schema): AsyncGenerator<{
     success: boolean;
     baseUrl: string;

package/src/executors/module-federation-dev-server/lib/start-static-remotes-file-server.js

@@ -7,6 +7,10 @@ const file_server_impl_1 = tslib_1.__importDefault(require("@nx/web/src/executor
 const path_1 = require("path");
 const fs_1 = require("fs");
 function startStaticRemotesFileServer(staticRemotesConfig, context, options) {
+    if (!staticRemotesConfig.remotes ||
+        staticRemotesConfig.remotes.length === 0) {
+        return;
+    }
     let shouldMoveToCommonLocation = false;
     let commonOutputDirectory;
     for (const app of staticRemotesConfig.remotes) {

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

@@ -14,11 +14,12 @@ const dev_server_impl_1 = require("../../builders/dev-server/dev-server.impl");
 const module_federation_2 = require("../../builders/utilities/module-federation");
 const path_1 = require("path");
 const fs_1 = require("fs");
+const start_remote_proxies_1 = require("@nx/webpack/src/utils/module-federation/start-remote-proxies");
+const parse_static_remotes_config_1 = require("@nx/webpack/src/utils/module-federation/parse-static-remotes-config");
 async function* moduleFederationDevServerExecutor(schema, context) {
     // Force Node to resolve to look for the nx binary that is inside node_modules
     const nxBin = require.resolve('nx/bin/nx');
     const options = (0, lib_1.normalizeOptions)(schema);
-    options.staticRemotesPort ??= options.port + 1;
     const { projects: workspaceProjects } = (0, devkit_1.readProjectsConfigurationFromProjectGraph)(context.projectGraph);
     const project = workspaceProjects[context.projectName];
     const currIter = options.static
@@ -62,31 +63,19 @@ async function* moduleFederationDevServerExecutor(schema, context) {
         projectGraph: context.projectGraph,
         root: context.root,
     }, pathToManifestFile);
-    if (remotes.devRemotes.length > 0 && !schema.staticRemotesPort) {
-        options.staticRemotesPort = options.devRemotes.reduce((portToUse, r) => {
-            const remoteName = typeof r === 'string' ? r : r.remoteName;
-            const remotePort = context.projectGraph.nodes[remoteName].data.targets['serve'].options
-                .port;
-            if (remotePort >= portToUse) {
-                return remotePort + 1;
-            }
-            else {
-                return portToUse;
-            }
-        }, options.staticRemotesPort);
-    }
-    const staticRemotesConfig = (0, lib_1.parseStaticRemotesConfig)(remotes.staticRemotes, context);
-    await (0, lib_1.buildStaticRemotes)(staticRemotesConfig, nxBin, context, options);
+    options.staticRemotesPort ??= remotes.staticRemotePort;
+    // 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)));
+    const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
+    const mappedLocationsOfStaticRemotes = await (0, lib_1.buildStaticRemotes)(staticRemotesConfig, nxBin, context, options);
     const devRemoteIters = await (0, lib_1.startRemotes)(remotes.devRemotes, workspaceProjects, options, context, 'serve');
-    const dynamicRemoteIters = await (0, lib_1.startRemotes)(remotes.dynamicRemotes, workspaceProjects, options, context, 'serve-static');
-    const staticRemotesIter = remotes.staticRemotes.length > 0
-        ? (0, lib_1.startStaticRemotesFileServer)(staticRemotesConfig, context, options)
-        : undefined;
+    const staticRemotesIter = (0, lib_1.startStaticRemotesFileServer)(staticRemotesConfig, context, options);
+    (0, start_remote_proxies_1.startRemoteProxies)(staticRemotesConfig, mappedLocationsOfStaticRemotes);
     const removeBaseUrlEmission = (iter) => (0, async_iterable_1.mapAsyncIterable)(iter, (v) => ({
         ...v,
         baseUrl: undefined,
     }));
-    return yield* (0, async_iterable_1.combineAsyncIterables)(removeBaseUrlEmission(currIter), ...devRemoteIters.map(removeBaseUrlEmission), ...dynamicRemoteIters.map(removeBaseUrlEmission), ...(staticRemotesIter ? [removeBaseUrlEmission(staticRemotesIter)] : []), (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
+    return yield* (0, async_iterable_1.combineAsyncIterables)(removeBaseUrlEmission(currIter), ...devRemoteIters.map(removeBaseUrlEmission), ...(staticRemotesIter ? [removeBaseUrlEmission(staticRemotesIter)] : []), (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
         if (!options.isInitialHost) {
             done();
             return;

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/mf/with-module-federation-ssr.js

@@ -9,44 +9,59 @@ async function withModuleFederationForSSR(options, configOverride) {
     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,
-                /**
-                 * Apply user-defined config override
-                 */
-                ...(configOverride ? configOverride : {}),
-            }, {}),
-            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.disableNxRuntimeLibraryControlPlugin
+                        ? [
+                            ...(configOverride?.runtimePlugins ?? []),
+                            require.resolve('@nx/webpack/src/utils/module-federation/plugins/runtime-library-control.plugin.js'),
+                        ]
+                        : configOverride?.runtimePlugins,
+                }, {}),
+                sharedLibraries.getReplacementPlugin(),
+            ],
+        };
+        // 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;
+    };
 }

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

@@ -8,47 +8,62 @@ async function withModuleFederation(options, configOverride) {
         return (config) => config;
     }
     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 webpack_1.ModuleFederationPlugin({
-                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(),
                 },
-                /**
-                 * Apply user-defined config override
-                 */
-                ...(configOverride ? configOverride : {}),
-            }),
-            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.disableNxRuntimeLibraryControlPlugin
+                        ? [
+                            ...(configOverride?.runtimePlugins ?? []),
+                            require.resolve('@nx/webpack/src/utils/module-federation/plugins/runtime-library-control.plugin.js'),
+                        ]
+                        : configOverride?.runtimePlugins,
+                }),
+                sharedLibraries.getReplacementPlugin(),
+            ],
+        };
+        // 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;
+    };
 }

package/src/executors/module-federation-dev-server/lib/parse-static-remotes-config.d.ts

@@ -1,11 +0,0 @@
-import type { ExecutorContext } from '@nx/devkit';
-export type StaticRemoteConfig = {
-    basePath: string;
-    outputPath: string;
-    urlSegment: string;
-};
-export type StaticRemotesConfig = {
-    remotes: string[];
-    config: Record<string, StaticRemoteConfig> | undefined;
-};
-export declare function parseStaticRemotesConfig(staticRemotes: string[] | undefined, context: ExecutorContext): StaticRemotesConfig;

package/src/executors/module-federation-dev-server/lib/parse-static-remotes-config.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseStaticRemotesConfig = parseStaticRemotesConfig;
-const path_1 = require("path");
-function parseStaticRemotesConfig(staticRemotes, context) {
-    if (!staticRemotes?.length) {
-        return { remotes: [], config: undefined };
-    }
-    const config = {};
-    for (const app of staticRemotes) {
-        const outputPath = context.projectGraph.nodes[app].data.targets['build'].options.outputPath;
-        const basePath = (0, path_1.dirname)(outputPath);
-        const urlSegment = (0, path_1.basename)(outputPath);
-        config[app] = { basePath, outputPath, urlSegment };
-    }
-    return { remotes: staticRemotes, config };
-}