@nx/angular 23.1.0 → 23.1.2

package/dist/src/migrations/update-23-1-0/add-optional-webpack-packages.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = addOptionalWebpackPackages;
+const devkit_1 = require("@nx/devkit");
+const internal_1 = require("@nx/devkit/internal");
+const versions_1 = require("../../utils/versions");
+const webpackExecutors = new Set([
+    '@nx/angular:webpack-browser',
+    '@nx/angular:webpack-server',
+]);
+const webpackBuildTargetExecutors = new Set([
+    '@nx/angular:webpack-browser',
+    '@angular-devkit/build-angular:browser',
+]);
+const moduleFederationExecutors = new Set([
+    '@nx/angular:module-federation-dev-server',
+    '@nx/angular:module-federation-dev-ssr',
+]);
+function resolveBuildTargetExecutor(targetString, projects, targetDefaults) {
+    const [projectName, targetName] = targetString.split(':');
+    const target = targetName
+        ? projects.get(projectName)?.targets?.[targetName]
+        : undefined;
+    if (target === undefined) {
+        return undefined;
+    }
+    // The referenced build target can inherit its executor from targetDefaults,
+    // which the raw project config does not merge, so resolve it before matching.
+    return (target.executor ??
+        (0, internal_1.readTargetDefaultsForTarget)(targetName, targetDefaults)?.executor);
+}
+function usesWebpackDevServer(target, projects, targetDefaults) {
+    if (target.executor !== '@nx/angular:dev-server') {
+        return false;
+    }
+    return [target.options, ...Object.values(target.configurations ?? {})].some((options) => {
+        const buildTarget = options?.buildTarget ?? options?.browserTarget;
+        if (typeof buildTarget !== 'string') {
+            return false;
+        }
+        const executor = resolveBuildTargetExecutor(buildTarget, projects, targetDefaults);
+        return (executor !== undefined && webpackBuildTargetExecutors.has(executor));
+    });
+}
+async function addOptionalWebpackPackages(tree) {
+    const projects = (0, devkit_1.getProjects)(tree);
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const targetDefaults = nxJson?.targetDefaults;
+    let needsWebpack = false;
+    let needsModuleFederation = false;
+    let needsRspack = false;
+    for (const [, project] of projects) {
+        for (const target of Object.values(project.targets ?? {})) {
+            needsWebpack ||=
+                webpackExecutors.has(target.executor) ||
+                    usesWebpackDevServer(target, projects, targetDefaults);
+            needsModuleFederation ||= moduleFederationExecutors.has(target.executor);
+            needsRspack ||= target.executor?.startsWith('@nx/rspack:') ?? false;
+        }
+        // Remotes get a plain dev-server (no Module Federation executor) but still
+        // generate a module-federation.config that requires @nx/module-federation
+        // at build time, so detect them by that config file too. This covers
+        // remotes whose host lives in a different workspace.
+        needsModuleFederation ||=
+            tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.ts')) ||
+                tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.js'));
+    }
+    // targetDefaults are keyed by target name or executor, and a default can set
+    // an executor that an empty project target inherits, so scan the keys and any
+    // executor on the default (both the object and array forms).
+    for (const [targetOrExecutor, config] of Object.entries(targetDefaults ?? {})) {
+        const executors = [targetOrExecutor];
+        for (const entry of Array.isArray(config) ? config : [config]) {
+            if (entry.executor != null) {
+                executors.push(entry.executor);
+            }
+        }
+        for (const executor of executors) {
+            needsWebpack ||= webpackExecutors.has(executor);
+            needsModuleFederation ||= moduleFederationExecutors.has(executor);
+            needsRspack ||= executor.startsWith('@nx/rspack:');
+        }
+    }
+    needsRspack ||=
+        nxJson?.plugins?.some((plugin) => typeof plugin === 'string'
+            ? plugin === '@nx/rspack/plugin'
+            : plugin.plugin === '@nx/rspack/plugin') ?? false;
+    if (!needsWebpack && !needsModuleFederation && !needsRspack) {
+        return;
+    }
+    return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+        ...(needsWebpack
+            ? {
+                '@nx/webpack': versions_1.nxVersion,
+                'webpack-merge': versions_1.webpackMergeVersion,
+            }
+            : {}),
+        ...(needsModuleFederation ? { '@nx/module-federation': versions_1.nxVersion } : {}),
+        ...(needsRspack ? { '@nx/rspack': versions_1.nxVersion } : {}),
+    }, undefined, true);
+}

package/dist/src/migrations/update-23-1-0/add-optional-webpack-packages.md

@@ -0,0 +1,39 @@
+#### Add Optional Webpack Packages
+
+Adds `@nx/webpack`, `@nx/module-federation`, `@nx/rspack`, and `webpack-merge` to the workspace when existing targets require them.
+
+These packages are no longer direct dependencies of `@nx/angular`; they are now optional peer dependencies, so installing `@nx/angular` no longer pulls webpack tooling into workspaces that only use the esbuild or Vite build stack. This migration backfills them for workspaces that already use webpack, Module Federation, or Rspack so those builds keep working after upgrading. Packages that are already present are left untouched.
+
+A package is added only when a matching target exists:
+
+- `@nx/webpack` and `webpack-merge`: an `@nx/angular:webpack-browser` or `@nx/angular:webpack-server` target, or an `@nx/angular:dev-server` whose build target uses `@nx/angular:webpack-browser` or `@angular-devkit/build-angular:browser`.
+- `@nx/module-federation`: an `@nx/angular:module-federation-dev-server` or `@nx/angular:module-federation-dev-ssr` target, or a project with a `module-federation.config.{js,ts}` file (covers remotes whose host lives in another workspace).
+- `@nx/rspack`: an `@nx/rspack:*` target or the `@nx/rspack/plugin` plugin in `nx.json`.
+
+Targets that inherit their executor from an `nx.json` `targetDefaults` entry are detected too.
+
+#### Examples
+
+For a workspace with an `@nx/angular:webpack-browser` build target, the migration adds the webpack packages to `devDependencies`.
+
+##### Before
+
+```jsonc title="package.json"
+{
+  "devDependencies": {
+    "@nx/angular": "23.1.0",
+  },
+}
+```
+
+##### After
+
+```jsonc title="package.json"
+{
+  "devDependencies": {
+    "@nx/angular": "23.1.0",
+    "@nx/webpack": "23.1.0",
+    "webpack-merge": "^5.8.0",
+  },
+}
+```

package/dist/src/plugins/plugin.js

@@ -8,8 +8,6 @@ const js_1 = require("@nx/js");
 const node_fs_1 = require("node:fs");
 const node_path_1 = require("node:path");
 const posix = tslib_1.__importStar(require("node:path/posix"));
-const devkit_internals_1 = require("nx/src/devkit-internals");
-const cache_directory_1 = require("nx/src/utils/cache-directory");
 const targets_1 = require("../utils/targets");
 const vitest_1 = require("./utils/vitest");
 const knownExecutors = {
@@ -48,8 +46,8 @@ const knownExecutors = {
 exports.createNodes = [
     '**/angular.json',
     async (configFiles, options, context) => {
-        const optionsHash = (0, devkit_internals_1.hashObject)(options);
-        const cachePath = (0, node_path_1.join)(cache_directory_1.workspaceDataDirectory, `angular-${optionsHash}.hash`);
+        const optionsHash = (0, internal_1.hashObject)(options);
+        const cachePath = (0, node_path_1.join)(internal_1.workspaceDataDirectory, `angular-${optionsHash}.hash`);
         const projectsCache = new internal_1.PluginCache(cachePath);
         const packageManager = (0, devkit_1.detectPackageManager)(context.workspaceRoot);
         const pmc = (0, devkit_1.getPackageManagerCommand)(packageManager);

package/dist/tailwind.d.ts

@@ -1,5 +1,5 @@
 /**
  * @deprecated `@nx/angular/tailwind` will be removed in Nx 24. Migrate to Tailwind CSS v4 which no longer needs glob patterns.
- * See: https://nx.dev/docs/technologies/angular/guides/using-tailwind-css-with-angular
+ * See: https://nx.dev/docs/technologies/angular/guides/using-tailwind-css-with-angular-projects
  */
 export declare function createGlobPatternsForDependencies(dirPath: string, fileGlobPattern?: string): string[];

package/dist/tailwind.js

@@ -5,14 +5,14 @@ const internal_1 = require("@nx/js/internal");
 let hasWarned = false;
 /**
  * @deprecated `@nx/angular/tailwind` will be removed in Nx 24. Migrate to Tailwind CSS v4 which no longer needs glob patterns.
- * See: https://nx.dev/docs/technologies/angular/guides/using-tailwind-css-with-angular
+ * See: https://nx.dev/docs/technologies/angular/guides/using-tailwind-css-with-angular-projects
  */
 function createGlobPatternsForDependencies(dirPath, fileGlobPattern = '/**/!(*.stories|*.spec).{ts,html}') {
     if (!hasWarned) {
         hasWarned = true;
         console.warn(`\nWARNING: "@nx/angular/tailwind" is deprecated and will be removed in Nx 24.\n` +
             `Migrate to Tailwind CSS v4 which no longer needs glob patterns for content detection.\n` +
-            `See: https://nx.dev/docs/technologies/angular/guides/using-tailwind-css-with-angular\n`);
+            `See: https://nx.dev/docs/technologies/angular/guides/using-tailwind-css-with-angular-projects\n`);
     }
     try {
         return (0, internal_1.createGlobPatternsForDependencies)(dirPath, fileGlobPattern);

package/migrations.json

@@ -366,6 +366,12 @@
       "description": "Remove the `extendedDiagnostics` Angular compiler option from tsconfig files where `strictTemplates` resolves to `false`. Angular v22's `strict-templates-default` and `strict-safe-navigation-narrow` migrations can together produce this combination, which the Angular compiler rejects (`extendedDiagnostics` requires `strictTemplates` to be enabled).",
       "factory": "./dist/src/migrations/update-23-1-0/remove-conflicting-extended-diagnostics",
       "documentation": "./dist/src/migrations/update-23-1-0/remove-conflicting-extended-diagnostics.md"
+    },
+    "update-23-1-0-add-optional-webpack-packages": {
+      "version": "23.1.0-rc.3",
+      "description": "Add optional webpack, Module Federation, and Rspack packages when existing targets require them.",
+      "factory": "./dist/src/migrations/update-23-1-0/add-optional-webpack-packages",
+      "documentation": "./dist/src/migrations/update-23-1-0/add-optional-webpack-packages.md"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "23.1.0",
+  "version": "23.1.2",
   "private": false,
   "type": "commonjs",
   "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, 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.",
@@ -80,19 +80,14 @@
     "picomatch": "4.0.4",
     "semver": "^7.6.3",
     "tslib": "^2.3.0",
-    "webpack-merge": "^5.8.0",
-    "@nx/devkit": "23.1.0",
-    "@nx/module-federation": "23.1.0",
-    "@nx/rspack": "23.1.0",
-    "@nx/web": "23.1.0",
-    "@nx/js": "23.1.0",
-    "@nx/eslint": "23.1.0",
-    "@nx/webpack": "23.1.0"
+    "@nx/devkit": "23.1.2",
+    "@nx/js": "23.1.2",
+    "@nx/eslint": "23.1.2",
+    "@nx/web": "23.1.2"
   },
   "devDependencies": {
-    "@nx/cypress": "23.1.0",
-    "@nx/vitest": "23.1.0",
-    "nx": "23.1.0"
+    "@nx/vitest": "23.1.2",
+    "nx": "23.1.2"
   },
   "peerDependencies": {
     "@angular/build": ">= 20.0.0 < 23.0.0",
@@ -101,7 +96,13 @@
     "@angular-devkit/schematics": ">= 20.0.0 < 23.0.0",
     "@schematics/angular": ">= 20.0.0 < 23.0.0",
     "ng-packagr": ">= 20.0.0 < 23.0.0",
-    "rxjs": "^6.5.3 || ^7.5.0"
+    "rxjs": "^6.5.3 || ^7.5.0",
+    "webpack-merge": "^5.8.0",
+    "@nx/cypress": "23.1.2",
+    "@nx/module-federation": "23.1.2",
+    "@nx/playwright": "23.1.2",
+    "@nx/webpack": "23.1.2",
+    "@nx/rspack": "23.1.2"
   },
   "peerDependenciesMeta": {
     "@angular/build": {
@@ -110,8 +111,26 @@
     "@angular-devkit/build-angular": {
       "optional": true
     },
+    "@nx/cypress": {
+      "optional": true
+    },
+    "@nx/module-federation": {
+      "optional": true
+    },
+    "@nx/playwright": {
+      "optional": true
+    },
+    "@nx/rspack": {
+      "optional": true
+    },
+    "@nx/webpack": {
+      "optional": true
+    },
     "ng-packagr": {
       "optional": true
+    },
+    "webpack-merge": {
+      "optional": true
     }
   },
   "publishConfig": {