@nx/angular 21.1.1 → 21.2.0-canary.20250522-7e0719c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "21.1.1",
+  "version": "21.2.0-canary.20250522-7e0719c",
   "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": {
@@ -67,14 +67,14 @@
     "semver": "^7.5.3",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "21.1.1",
-    "@nx/js": "21.1.1",
-    "@nx/eslint": "21.1.1",
-    "@nx/webpack": "21.1.1",
-    "@nx/rspack": "21.1.1",
-    "@nx/module-federation": "21.1.1",
-    "@nx/web": "21.1.1",
-    "@nx/workspace": "21.1.1",
+    "@nx/devkit": "21.2.0-canary.20250522-7e0719c",
+    "@nx/js": "21.2.0-canary.20250522-7e0719c",
+    "@nx/eslint": "21.2.0-canary.20250522-7e0719c",
+    "@nx/webpack": "21.2.0-canary.20250522-7e0719c",
+    "@nx/rspack": "21.2.0-canary.20250522-7e0719c",
+    "@nx/module-federation": "21.2.0-canary.20250522-7e0719c",
+    "@nx/web": "21.2.0-canary.20250522-7e0719c",
+    "@nx/workspace": "21.2.0-canary.20250522-7e0719c",
     "piscina": "^4.4.0"
   },
   "peerDependencies": {

package/src/generators/convert-to-rspack/convert-to-rspack.js

@@ -27,12 +27,7 @@ const RENAMED_OPTIONS = {
     ngswConfigPath: 'serviceWorker',
 };
 const DEFAULT_PORT = 4200;
-const REMOVED_OPTIONS = [
-    'buildOptimizer',
-    'buildTarget',
-    'browserTarget',
-    'publicHost',
-];
+const REMOVED_OPTIONS = ['buildOptimizer', 'buildTarget', 'browserTarget'];
 function normalizeFromProjectRoot(tree, path, projectRoot) {
     if (projectRoot === '.') {
         if (!path.startsWith('./')) {
@@ -349,6 +344,7 @@ async function convertToRspack(tree, schema) {
     if (!schema.skipInstall) {
         const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
             '@nx/angular-rspack': versions_1.angularRspackVersion,
+            'webpack-merge': versions_1.webpackMergeVersion,
             'ts-node': versions_1.tsNodeVersion,
         });
         tasks.push(installTask);

package/src/generators/convert-to-rspack/lib/get-custom-webpack-config.js

@@ -30,7 +30,7 @@ function convertWebpackConfigToUseNxModuleFederationPlugin(webpackConfigContents
     const withModuleFederationImportNodes = (0, tsquery_1.tsquery)(ast, 'ImportDeclaration:has(StringLiteral[value=@nx/module-federation/angular])');
     if (withModuleFederationImportNodes.length > 0) {
         const withModuleFederationImportNode = withModuleFederationImportNodes[0];
-        newWebpackConfigContents = `${webpackConfigContents.slice(0, withModuleFederationImportNode.getStart())}import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack';${webpackConfigContents.slice(withModuleFederationImportNode.getEnd())}`;
+        newWebpackConfigContents = `${webpackConfigContents.slice(0, withModuleFederationImportNode.getStart())}import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/angular';${webpackConfigContents.slice(withModuleFederationImportNode.getEnd())}`;
         ast = tsquery_1.tsquery.ast(newWebpackConfigContents);
         const exportedWithModuleFederationNodes = (0, tsquery_1.tsquery)(ast, 'ExportAssignment:has(CallExpression > Identifier[name=withModuleFederation])');
         if (exportedWithModuleFederationNodes.length > 0) {

package/src/generators/host/host.js

@@ -12,8 +12,14 @@ const remote_1 = tslib_1.__importDefault(require("../remote/remote"));
 const setup_mf_1 = require("../setup-mf/setup-mf");
 const add_mf_env_to_inputs_1 = require("../utils/add-mf-env-to-inputs");
 const lib_1 = require("./lib");
+const assert_mf_utils_1 = require("../utils/assert-mf-utils");
+const convert_to_rspack_1 = tslib_1.__importDefault(require("../convert-to-rspack/convert-to-rspack"));
 async function host(tree, schema) {
     (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(tree, 'angular', 'host');
+    // TODO: Replace with Rspack when confidence is high enough
+    schema.bundler ??= 'webpack';
+    const isRspack = schema.bundler === 'rspack';
+    (0, assert_mf_utils_1.assertRspackIsCSR)(schema.bundler, schema.ssr ?? false, schema.serverRouting ?? false);
     const { typescriptConfiguration = true, ...options } = schema;
     options.standalone = options.standalone ?? true;
     const projects = (0, devkit_1.getProjects)(tree);
@@ -75,7 +81,8 @@ async function host(tree, schema) {
         let ssrInstallTask = await (0, lib_1.updateSsrSetup)(tree, options, hostProjectName, typescriptConfiguration);
         installTasks.push(ssrInstallTask);
     }
-    for (const remote of remotesToGenerate) {
+    for (let i = 0; i < remotesToGenerate.length; i++) {
+        const remote = remotesToGenerate[i];
         const remoteDirectory = options.directory
             ? (0, devkit_1.joinPathFragments)(options.directory, '..', remote)
             : appRoot === '.'
@@ -86,12 +93,25 @@ async function host(tree, schema) {
             name: remote,
             directory: remoteDirectory,
             host: hostProjectName,
+            port: isRspack ? 4200 + i + 1 : undefined,
             skipFormat: true,
             standalone: options.standalone,
             typescriptConfiguration,
         });
     }
     (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(tree);
+    if (isRspack) {
+        await (0, convert_to_rspack_1.default)(tree, {
+            project: hostProjectName,
+            skipInstall: options.skipPackageJson,
+            skipFormat: true,
+        });
+    }
+    const project = (0, devkit_1.readProjectConfiguration)(tree, hostProjectName);
+    project.targets.serve ??= {};
+    project.targets.serve.options ??= {};
+    project.targets.serve.options.port = 4200;
+    (0, devkit_1.updateProjectConfiguration)(tree, hostProjectName, project);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }

package/src/generators/host/schema.d.ts

@@ -5,6 +5,7 @@ import type { Styles } from '../utils/types';
 export interface Schema {
   directory: string;
   name?: string;
+  bundler?: 'webpack' | 'rspack';
   remotes?: string[];
   dynamic?: boolean;
   setParserOptionsProject?: boolean;

package/src/generators/host/schema.json

@@ -37,6 +37,12 @@
       "x-priority": "important",
       "alias": "producers"
     },
+    "bundler": {
+      "type": "string",
+      "description": "The bundler to use for the host application.",
+      "default": "webpack",
+      "enum": ["webpack", "rspack"]
+    },
     "dynamic": {
       "type": "boolean",
       "description": "Should the host application use dynamic federation?",

package/src/generators/remote/remote.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.remote = remote;
+const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
@@ -10,8 +11,14 @@ const application_1 = require("../application/application");
 const setup_mf_1 = require("../setup-mf/setup-mf");
 const add_mf_env_to_inputs_1 = require("../utils/add-mf-env-to-inputs");
 const lib_1 = require("./lib");
+const assert_mf_utils_1 = require("../utils/assert-mf-utils");
+const convert_to_rspack_1 = tslib_1.__importDefault(require("../convert-to-rspack/convert-to-rspack"));
 async function remote(tree, schema) {
     (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(tree, 'angular', 'remote');
+    // TODO: Replace with Rspack when confidence is high enough
+    schema.bundler ??= 'webpack';
+    const isRspack = schema.bundler === 'rspack';
+    (0, assert_mf_utils_1.assertRspackIsCSR)(schema.bundler, schema.ssr ?? false, schema.serverRouting ?? false);
     const { typescriptConfiguration = true, ...options } = schema;
     options.standalone = options.standalone ?? true;
     const projects = (0, devkit_1.getProjects)(tree);
@@ -75,6 +82,22 @@ async function remote(tree, schema) {
         installTasks.push(ssrInstallTask);
     }
     (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(tree);
+    if (isRspack) {
+        await (0, convert_to_rspack_1.default)(tree, {
+            project: remoteProjectName,
+            skipInstall: options.skipPackageJson,
+            skipFormat: true,
+        });
+    }
+    const project = (0, devkit_1.readProjectConfiguration)(tree, remoteProjectName);
+    project.targets.serve ??= {};
+    project.targets.serve.options ??= {};
+    if (options.host) {
+        project.targets.serve.dependsOn ??= [];
+        project.targets.serve.dependsOn.push(`${options.host}:serve`);
+    }
+    project.targets.serve.options.port = port;
+    (0, devkit_1.updateProjectConfiguration)(tree, remoteProjectName, project);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }

package/src/generators/remote/schema.d.ts

@@ -5,6 +5,7 @@ import type { Styles } from '../utils/types';
 export interface Schema {
   directory: string;
   name?: string;
+  bundler?: 'webpack' | 'rspack';
   host?: string;
   port?: number;
   setParserOptionsProject?: boolean;

package/src/generators/remote/schema.json

@@ -42,6 +42,12 @@
       "type": "number",
       "description": "The port on which this app should be served."
     },
+    "bundler": {
+      "type": "string",
+      "description": "The bundler to use for the remote application.",
+      "default": "webpack",
+      "enum": ["webpack", "rspack"]
+    },
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",

package/src/generators/utils/assert-mf-utils.d.ts

@@ -0,0 +1 @@
+export declare function assertRspackIsCSR(bundler: 'webpack' | 'rspack', ssr: boolean, serverRouting: boolean): void;

package/src/generators/utils/assert-mf-utils.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assertRspackIsCSR = assertRspackIsCSR;
+function assertRspackIsCSR(bundler, ssr, serverRouting) {
+    if (bundler === 'rspack' && serverRouting) {
+        throw new Error('Server Routing is not currently supported for Angular Rspack Module Federation. Please use webpack instead.');
+    }
+    if (bundler === 'rspack' && ssr) {
+        throw new Error('SSR is not currently supported for Angular Rspack Module Federation. Please use webpack instead.');
+    }
+}

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

@@ -29,6 +29,7 @@ exports.backwardCompatibleVersions = {
         typesNodeVersion: '18.16.9',
         jasmineMarblesVersion: '^0.9.2',
         jsoncEslintParserVersion: '^2.1.0',
+        webpackMergeVersion: '^5.8.0',
     },
     angularV18: {
         angularVersion: '~18.2.0',
@@ -58,5 +59,6 @@ exports.backwardCompatibleVersions = {
         typesNodeVersion: '18.16.9',
         jasmineMarblesVersion: '^0.9.2',
         jsoncEslintParserVersion: '^2.1.0',
+        webpackMergeVersion: '^5.8.0',
     },
 };

package/src/utils/versions.d.ts

@@ -15,6 +15,7 @@ export declare const typesExpressVersion = "^4.17.21";
 export declare const browserSyncVersion = "^3.0.0";
 export declare const moduleFederationNodeVersion = "^2.6.26";
 export declare const moduleFederationEnhancedVersion = "^0.9.0";
+export declare const webpackMergeVersion = "^5.8.0";
 export declare const angularEslintVersion = "^19.2.0";
 export declare const typescriptEslintVersion = "^7.16.0";
 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.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.browserSyncVersion = exports.typesExpressVersion = exports.expressVersion = exports.typesCorsVersion = exports.corsVersion = exports.tsLibVersion = exports.angularJsVersion = exports.zoneJsVersion = exports.rxjsVersion = exports.ngrxVersion = exports.angularRspackVersion = 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.webpackMergeVersion = 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.angularRspackVersion = exports.ngPackagrVersion = exports.angularDevkitVersion = exports.angularVersion = exports.nxVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
 exports.angularVersion = '~19.2.0';
 exports.angularDevkitVersion = '~19.2.0';
@@ -18,6 +18,7 @@ exports.typesExpressVersion = '^4.17.21';
 exports.browserSyncVersion = '^3.0.0';
 exports.moduleFederationNodeVersion = '^2.6.26';
 exports.moduleFederationEnhancedVersion = '^0.9.0';
+exports.webpackMergeVersion = '^5.8.0';
 exports.angularEslintVersion = '^19.2.0';
 exports.typescriptEslintVersion = '^7.16.0';
 exports.tailwindVersion = '^3.0.2';