@nx/angular 24.0.0-beta.3 → 24.0.0-beta.4

package/dist/fesm2022/nx-angular.mjs

@@ -1,4 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-//# sourceMappingURL=nx-angular.mjs.map

package/dist/src/executors/application/schema.json

@@ -522,8 +522,7 @@
             },
             "preloadInitial": {
               "type": "boolean",
-              "default": true,
-              "description": "Generates 'preload', 'modulepreload', and 'preconnect' link elements for initial application files and resources."
+              "description": "Generates 'preload', 'modulepreload', and 'preconnect' link elements for initial application files and resources. Defaults to false when a service worker is enabled; otherwise true. _Note: defaulting to false when a service worker is enabled only applies in Angular versions >= 22.2.0. Earlier versions default to true._"
             }
           },
           "required": ["input"]

package/dist/src/executors/ng-packagr-lite/ng-packagr-adjustments/ng-package/entry-point/write-bundles.transform.js

@@ -12,8 +12,10 @@ exports.writeBundlesTransform = void 0;
 exports.removeSourceMappingUrl = removeSourceMappingUrl;
 exports.remapDeclarationMapSources = remapDeclarationMapSources;
 exports.normalizeEsm2022Path = normalizeEsm2022Path;
+const tslib_1 = require("tslib");
 const transform_1 = require("ng-packagr/src/lib/graph/transform");
 const nodes_1 = require("ng-packagr/src/lib/ng-package/nodes");
+const ngPackagrNodes = tslib_1.__importStar(require("ng-packagr/src/lib/ng-package/nodes"));
 const package_1 = require("ng-packagr/src/lib/ng-package/package");
 const path_1 = require("ng-packagr/src/lib/utils/path");
 const promises_1 = require("node:fs/promises");
@@ -29,9 +31,15 @@ async function shouldWriteFile(filePath, newContent) {
         return true;
     }
 }
+// ng-packagr 22.2.0 to 22.2.3 build entry points in parallel and export this
+// to find the one a graph is scoped to. 22.2.4 reverted that:
+// https://github.com/ng-packagr/ng-packagr/issues/3451
+const { getActiveEntryPoint } = ngPackagrNodes;
 const writeBundlesTransform = (_options) => {
     return (0, transform_1.transformFromPromise)(async (graph) => {
-        const entryPointNode = graph.find((0, nodes_1.isEntryPointInProgress)());
+        const entryPointNode = getActiveEntryPoint
+            ? getActiveEntryPoint(graph)
+            : graph.find((0, nodes_1.isEntryPointInProgress)());
         if (!entryPointNode) {
             return;
         }

package/dist/src/executors/unit-test/schema.json

@@ -22,7 +22,7 @@
     },
     "runnerConfig": {
       "type": ["string", "boolean"],
-      "description": "Specifies the configuration file for the selected test runner. If a string is provided, it will be used as the path to the configuration file. If `true`, the builder will search for a default configuration file (e.g., `vitest.config.ts` or `karma.conf.js`). If `false`, no external configuration file will be used.\\nFor Vitest, this enables advanced options and the use of custom plugins. Please note that while the file is loaded, the Angular team does not provide direct support for its specific contents or any third-party plugins used within it.",
+      "description": "Specifies the configuration file for the selected test runner. If a string is provided, it will be used as the path to the configuration file. If `true`, the builder will search for a default configuration file (e.g., `vitest-base.config.mts` or `karma.conf.js`). If `false`, no external configuration file will be used.\\nFor Vitest, this enables advanced options and the use of custom plugins. Please note that while the file is loaded, the Angular team does not provide direct support for its specific contents or any third-party plugins used within it.",
       "default": false
     },
     "browsers": {
@@ -46,6 +46,11 @@
       "type": "boolean",
       "description": "Enables isolation for test execution. When true, Vitest runs tests in separate threads or processes. This option is only available for the Vitest runner. Defaults to false to align with the Karma/Jasmine experience. _Note: this is only supported in Angular versions >= 22.0.0_."
     },
+    "splitting": {
+      "type": "boolean",
+      "description": "Enables code splitting for test execution. When enabled, shared code between test files is split into separate chunks. Issues with live ESM bindings in Node.js environments (such as uninitialized exports or mocking failures) can be resolved by disabling splitting. This option is only available for the Vitest runner. Defaults to `true`. _Note: this is only supported in Angular versions >= 22.2.0_.",
+      "x-deprecated": "No longer needed with Vitest 5."
+    },
     "quiet": {
       "type": "boolean",
       "description": "Suppresses the verbose build summary and stats table on each rebuild. Defaults to `true` locally and `false` in CI environments. _Note: this is only supported in Angular versions >= 22.0.0_."

package/dist/src/executors/unit-test/unit-test.impl.js

@@ -47,6 +47,11 @@ function validateOptions(options) {
             throw new Error(`The "quiet" option requires Angular version 22.0.0 or greater. You are currently using version ${angularVersion}.`);
         }
     }
+    if ((0, semver_1.lt)(angularVersion, '22.2.0')) {
+        if (options.splitting !== undefined) {
+            throw new Error(`The "splitting" option requires Angular version 22.2.0 or greater. You are currently using version ${angularVersion}.`);
+        }
+    }
 }
 /**
  * The Angular CLI unit-test builder only accepts the `@angular/build:application`

package/dist/src/executors/utilities/ng-packagr/stylesheet-processor.js

@@ -13,6 +13,7 @@ const devkit_1 = require("@nx/devkit");
 const browserslist_1 = tslib_1.__importDefault(require("browserslist"));
 const component_stylesheets_1 = require("ng-packagr/src/lib/styles/component-stylesheets");
 const postcss_configuration_1 = require("ng-packagr/src/lib/styles/postcss-configuration");
+const semver_1 = require("semver");
 const ng_packagr_version_1 = require("./ng-packagr-version");
 var CssUrl;
 (function (CssUrl) {
@@ -20,7 +21,13 @@ var CssUrl;
     CssUrl["none"] = "none";
 })(CssUrl || (exports.CssUrl = CssUrl = {}));
 function getStylesheetProcessor() {
-    const { major: ngPackagrMajorVersion } = (0, ng_packagr_version_1.getNgPackagrVersionInfo)();
+    const { major: ngPackagrMajorVersion, version: ngPackagrVersion } = (0, ng_packagr_version_1.getNgPackagrVersionInfo)();
+    // ng-packagr >= 22.2 resolves the style config once per package, older
+    // versions resolve it for each entry point
+    const resolvePerPackage = !(0, semver_1.lt)(ngPackagrVersion, '22.2.0');
+    // ng-packagr calls this factory once per build, so a later build in the
+    // same process reads config changes
+    const styleConfigCache = new Map();
     class StylesheetProcessor extends component_stylesheets_1.ComponentStylesheetBundler {
         constructor(projectBasePath, basePath, cssUrl, includePaths, sass, cacheDirectory, watch) {
             if (ngPackagrMajorVersion === 22) {
@@ -34,21 +41,17 @@ function getStylesheetProcessor() {
                     path: require.resolve('ng-packagr/.browserslistrc'),
                 });
             }
-            const browserslistData = (0, browserslist_1.default)(undefined, { path: basePath });
-            let searchDirs = (0, postcss_configuration_1.generateSearchDirectories)([projectBasePath]);
-            const postcssConfiguration = (0, postcss_configuration_1.loadPostcssConfiguration)(searchDirs);
-            // (nx-specific): we support loading the TailwindCSS config from the root of the workspace
-            searchDirs = (0, postcss_configuration_1.generateSearchDirectories)([projectBasePath, devkit_1.workspaceRoot]);
+            const { postcssConfiguration, tailwindConfiguration, target } = resolvePerPackage
+                ? getPackageStyleConfig(styleConfigCache, projectBasePath)
+                : resolveStyleConfig(projectBasePath, basePath);
             super({
                 cacheDirectory: cacheDirectory,
                 postcssConfiguration: postcssConfiguration,
-                tailwindConfiguration: postcssConfiguration
-                    ? undefined
-                    : (0, postcss_configuration_1.getTailwindConfig)(searchDirs, projectBasePath),
+                tailwindConfiguration: tailwindConfiguration,
                 sass: sass,
                 workspaceRoot: projectBasePath,
                 cssUrl: cssUrl,
-                target: transformSupportedBrowsersToTargets(browserslistData),
+                target: target,
                 includePaths: includePaths,
             }, 'css', watch);
             this.projectBasePath = projectBasePath;
@@ -65,6 +68,28 @@ function getStylesheetProcessor() {
     }
     return StylesheetProcessor;
 }
+function getPackageStyleConfig(styleConfigCache, projectBasePath) {
+    let config = styleConfigCache.get(projectBasePath);
+    if (!config) {
+        config = resolveStyleConfig(projectBasePath, projectBasePath);
+        styleConfigCache.set(projectBasePath, config);
+    }
+    return config;
+}
+function resolveStyleConfig(projectBasePath, browserslistPath) {
+    const browserslistData = (0, browserslist_1.default)(undefined, { path: browserslistPath });
+    let searchDirs = (0, postcss_configuration_1.generateSearchDirectories)([projectBasePath]);
+    const postcssConfiguration = (0, postcss_configuration_1.loadPostcssConfiguration)(searchDirs);
+    // (nx-specific): we support loading the TailwindCSS config from the root of the workspace
+    searchDirs = (0, postcss_configuration_1.generateSearchDirectories)([projectBasePath, devkit_1.workspaceRoot]);
+    return {
+        postcssConfiguration,
+        tailwindConfiguration: postcssConfiguration
+            ? undefined
+            : (0, postcss_configuration_1.getTailwindConfig)(searchDirs, projectBasePath),
+        target: transformSupportedBrowsersToTargets(browserslistData),
+    };
+}
 function transformSupportedBrowsersToTargets(supportedBrowsers) {
     const transformed = [];
     // https://esbuild.github.io/api/#target

package/dist/src/migrations/update-23-1-0/add-angular-build.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = default_1;
 const devkit_1 = require("@nx/devkit");
+const internal_1 = require("@nx/devkit/internal");
 const acknowledge_build_scripts_1 = require("../../generators/utils/acknowledge-build-scripts");
-const versions_1 = require("../../utils/versions");
+const version_utils_1 = require("../../generators/utils/version-utils");
 // The `@nx/angular:application` and `@nx/angular:unit-test` executors import
 // `@angular/build` directly to run the Angular builders, and any
 // `@angular/build:*` executor is provided by that package; it is a required
@@ -12,7 +13,8 @@ const versions_1 = require("../../utils/versions");
 // `@angular-devkit/build-angular`, which isn't reliable (it can be absent from
 // node_modules, e.g. under Yarn Berry), so `require.resolve('@angular/build')`
 // fails and the build breaks. Add it as a direct dependency when an executor
-// needs it, at the version the application generator installs.
+// needs it. Match the version `@angular-devkit/build-angular` pins it to,
+// because a newer `@angular/build` breaks peers such as `@angular/ssr`.
 const angularBuildExecutors = [
     '@nx/angular:application',
     '@nx/angular:unit-test',
@@ -51,5 +53,7 @@ async function default_1(tree) {
         return;
     }
     (0, acknowledge_build_scripts_1.acknowledgeAngularBuildScripts)(tree);
-    return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@angular/build': versions_1.angularDevkitVersion }, undefined, true);
+    const version = (0, internal_1.getInstalledPackageVersionFromTree)(tree, '@angular-devkit/build-angular') ??
+        (0, version_utils_1.getInstalledAngularVersion)(tree);
+    return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@angular/build': `~${version}` }, undefined, true);
 }

package/dist/src/migrations/update-23-1-0/add-angular-build.md

@@ -1,6 +1,6 @@
 #### Add `@angular/build` When Used by an Executor
 
-The `@nx/angular:application` and `@nx/angular:unit-test` executors load the Angular builders by importing `@angular/build` directly, and any `@angular/build:*` executor is provided by that package, so `@angular/build` is a required runtime dependency for workspaces using those targets. Nothing declares it as a direct dependency, though: it has only ever been available transitively as a dependency of `@angular-devkit/build-angular`. That is not reliable (for example, under Yarn Berry it can be missing from `node_modules` even when `@angular-devkit/build-angular` is installed), and when `@angular/build` cannot be resolved the build fails with an error like `The "@angular/build" package is required by "@nx/angular:application" but is not installed`. This migration adds `@angular/build` to `devDependencies` when a project uses one of those executors and it is not already installed, at the version the application generator installs. An existing version is preserved.
+The `@nx/angular:application` and `@nx/angular:unit-test` executors load the Angular builders by importing `@angular/build` directly, and any `@angular/build:*` executor is provided by that package, so `@angular/build` is a required runtime dependency for workspaces using those targets. Nothing declares it as a direct dependency, though: it has only ever been available transitively as a dependency of `@angular-devkit/build-angular`. That is not reliable (for example, under Yarn Berry it can be missing from `node_modules` even when `@angular-devkit/build-angular` is installed), and when `@angular/build` cannot be resolved the build fails with an error like `The "@angular/build" package is required by "@nx/angular:application" but is not installed`. This migration adds `@angular/build` to `devDependencies` when a project uses one of those executors and it is not already installed. It uses the installed `@angular-devkit/build-angular` version, which pins `@angular/build` to the same version. When `@angular-devkit/build-angular` isn't installed, it uses the `@angular/core` version declared in `package.json`, limited to that minor (`^22.1.0` becomes `~22.1.0`). An existing version is preserved.
 
 Executor usage is detected on any target using `@nx/angular:application`, `@nx/angular:unit-test`, or an `@angular/build:*` executor. Targets that inherit their executor from an `nx.json` `targetDefaults` entry are detected too.
 

package/dist/src/migrations/update-23-1-0/add-trust-proxy-headers.js

@@ -32,14 +32,21 @@ async function default_1(tree) {
                     ts.isIdentifier(node.expression) &&
                     (node.expression.text === 'AngularNodeAppEngine' ||
                         node.expression.text === 'AngularAppEngine')) {
-                    if (!node.arguments || node.arguments.length === 0) {
+                    if (!node.arguments) {
+                        // `new AngularAppEngine` without parentheses has no argument list.
+                        recorder ??= new file_change_recorder_1.FileChangeRecorder(tree, path);
+                        recorder.insertRight(node.end, `({\n  ${TODO_COMMENT}\n  ${TRUST_PROXY_HEADERS}\n})`);
+                    }
+                    else if (node.arguments.length === 0) {
                         // No options object: insert one before the closing parenthesis.
                         recorder ??= new file_change_recorder_1.FileChangeRecorder(tree, path);
                         recorder.insertRight(node.end - 1, `{\n  ${TODO_COMMENT}\n  ${TRUST_PROXY_HEADERS}\n}`);
                     }
                     else if (ts.isObjectLiteralExpression(node.arguments[0])) {
                         const optionsArg = node.arguments[0];
-                        const hasTrustProxyHeaders = optionsArg.properties.some((prop) => ts.isPropertyAssignment(prop) &&
+                        // Any member kind counts (shorthand, method, accessor): adding the
+                        // property next to one would duplicate the key.
+                        const hasTrustProxyHeaders = optionsArg.properties.some((prop) => prop.name &&
                             (ts.isIdentifier(prop.name) || ts.isStringLiteral(prop.name)) &&
                             prop.name.text === 'trustProxyHeaders');
                         if (!hasTrustProxyHeaders) {

package/dist/src/migrations/update-24-0-0/upgrade-to-angular-22-2.d.ts

@@ -0,0 +1,5 @@
+import { type Tree } from '@nx/devkit';
+export default function upgradeToAngular222(tree: Tree): Promise<{
+    nextSteps: string[];
+    agentContext: string[];
+}>;

package/dist/src/migrations/update-24-0-0/upgrade-to-angular-22-2.js

@@ -0,0 +1,332 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = upgradeToAngular222;
+const devkit_1 = require("@nx/devkit");
+const internal_1 = require("@nx/devkit/internal");
+const internal_2 = require("@nx/js/internal");
+const path_1 = require("path");
+// Keep these versions pinned; versions.ts advances to later Angular versions.
+const ANGULAR_22_2_VERSIONS = {
+    '@angular/core': '~22.2.0',
+    '@angular/animations': '~22.2.0',
+    '@angular/common': '~22.2.0',
+    '@angular/compiler': '~22.2.0',
+    '@angular/compiler-cli': '~22.2.0',
+    '@angular/elements': '~22.2.0',
+    '@angular/forms': '~22.2.0',
+    '@angular/language-service': '~22.2.0',
+    '@angular/localize': '~22.2.0',
+    '@angular/platform-browser': '~22.2.0',
+    '@angular/platform-browser-dynamic': '~22.2.0',
+    '@angular/platform-server': '~22.2.0',
+    '@angular/router': '~22.2.0',
+    '@angular/service-worker': '~22.2.0',
+    '@angular/upgrade': '~22.2.0',
+    '@angular/cli': '~22.2.0',
+    '@angular/build': '~22.2.0',
+    '@angular/pwa': '~22.2.0',
+    '@angular/ssr': '~22.2.0',
+    '@angular-devkit/build-angular': '~22.2.0',
+    '@angular-devkit/core': '~22.2.0',
+    '@angular-devkit/schematics': '~22.2.0',
+    '@angular-devkit/architect': '~0.2202.0',
+    '@angular-devkit/build-webpack': '~0.2202.0',
+    '@schematics/angular': '~22.2.0',
+    '@angular/aria': '~22.2.0',
+    '@angular/cdk': '~22.2.0',
+    '@angular/cdk-experimental': '~22.2.0',
+    '@angular/google-maps': '~22.2.0',
+    '@angular/material': '~22.2.0',
+    '@angular/material-date-fns-adapter': '~22.2.0',
+    '@angular/material-experimental': '~22.2.0',
+    '@angular/material-luxon-adapter': '~22.2.0',
+    '@angular/material-moment-adapter': '~22.2.0',
+    'ng-packagr': '~22.2.0',
+    'zone.js': '~0.16.2',
+};
+const COMPONENT_TESTING_SPECIFIER = /^(@?cypress\/angular|@nx\/angular\/plugins\/component-testing$)/;
+const MODULE_FEDERATION_SPECIFIER = /^(@module-federation\/(enhanced|node)|@nx\/module-federation|@nx\/angular\/(mf|module-federation))(\/|$)/;
+const MARKER_TEXT = /cypress\/angular|module-federation|@nx\/angular\/(mf|plugins\/component-testing)/;
+const NX_WEBPACK_EXECUTORS = new Set([
+    '@nx/angular:webpack-browser',
+    '@nx/angular:webpack-server',
+    '@nx/angular:module-federation-dev-server',
+    '@nx/angular:module-federation-dev-ssr',
+]);
+const WEBPACK_CONFIG_FILE = /^(webpack[\w.-]*|module-federation\.config)\.[cm]?[jt]s$/;
+const RESOLVE_EXTENSIONS = ['.ts', '.js', '.mjs', '.cjs', '.mts', '.cts'];
+const DEPENDENCY_FIELDS = [
+    'dependencies',
+    'devDependencies',
+    'optionalDependencies',
+    'peerDependencies',
+];
+let ts;
+async function upgradeToAngular222(tree) {
+    const scan = scanWorkspace(tree);
+    const unresolved = [];
+    const moduleFederationConfigs = findModuleFederationConfigs(tree, scan, unresolved);
+    const reasons = [];
+    if (scan.componentTestingFiles.length > 0) {
+        reasons.push(`Cypress component testing (${scan.componentTestingFiles.join(', ')}) fails with the webpack-dev-server 6 that Angular 22.2 installs (https://github.com/cypress-io/cypress/issues/34259)`);
+    }
+    if (moduleFederationConfigs.length > 0) {
+        reasons.push(`Module Federation builds (${moduleFederationConfigs.join(', ')}) fail with the webpack 5.111 that Angular 22.2 installs (https://github.com/module-federation/core/issues/5077)`);
+    }
+    else if (unresolved.length > 0 && scan.moduleFederationFiles.length > 0) {
+        reasons.push(`Module Federation fails with the webpack 5.111 that Angular 22.2 installs (https://github.com/module-federation/core/issues/5077). ${scan.moduleFederationFiles.join(', ')} import it, and the migration could not tell whether an Angular webpack build does: ${unresolved.join('; ')}`);
+    }
+    if (reasons.length > 0) {
+        const nextSteps = [
+            `Kept Angular 22.1. ${reasons.join('. ')}. A later Nx migration updates Angular once these issues are fixed. To update before then, move the Angular packages to 22.2 by hand and work around the issues.`,
+        ];
+        return { nextSteps, agentContext: nextSteps };
+    }
+    const declared = (0, devkit_1.readJson)(tree, 'package.json');
+    const { '@angular/core': core, ...others } = ANGULAR_22_2_VERSIONS;
+    // `@angular/core` goes to `dependencies` when the root does not declare it.
+    (0, devkit_1.addDependenciesToPackageJson)(tree, { '@angular/core': core }, Object.fromEntries(Object.entries(others).filter(([name]) => declared.dependencies?.[name] || declared.devDependencies?.[name])));
+}
+function scanWorkspace(tree) {
+    const scan = {
+        angularJsonPaths: [],
+        workspacePackages: new Set(),
+        declaredDependencies: new Map(),
+        componentTestingFiles: [],
+        moduleFederationFiles: [],
+    };
+    // Shared support libraries and config helpers can hold the imports, so the
+    // whole workspace is scanned.
+    (0, devkit_1.visitNotIgnoredFiles)(tree, '.', (filePath) => {
+        const fileName = (0, path_1.basename)(filePath);
+        if (fileName === 'angular.json') {
+            scan.angularJsonPaths.push(filePath);
+            return;
+        }
+        if (fileName === 'package.json') {
+            // Installs fail on a workspace package.json that doesn't parse, so
+            // skipping one loses no installed or linked package.
+            try {
+                const packageJson = (0, devkit_1.readJson)(tree, filePath);
+                if (typeof packageJson.name === 'string') {
+                    scan.workspacePackages.add(packageJson.name);
+                }
+                scan.declaredDependencies.set((0, path_1.dirname)(filePath), new Set(DEPENDENCY_FIELDS.flatMap((field) => Object.keys(packageJson[field] ?? {}))));
+            }
+            catch { }
+            return;
+        }
+        if (!/\.[cm]?[jt]sx?$/.test(filePath)) {
+            return;
+        }
+        const content = tree.read(filePath, 'utf-8');
+        if (!MARKER_TEXT.test(content)) {
+            return;
+        }
+        const { specifiers } = readModuleSpecifiers(filePath, content);
+        if (specifiers.some((s) => COMPONENT_TESTING_SPECIFIER.test(s))) {
+            scan.componentTestingFiles.push(filePath);
+        }
+        if (specifiers.some((s) => MODULE_FEDERATION_SPECIFIER.test(s))) {
+            scan.moduleFederationFiles.push(filePath);
+        }
+    });
+    return scan;
+}
+// The webpack config files of Angular webpack targets that import Module
+// Federation, following relative imports. An import or config the migration
+// cannot read is recorded in `unresolved`.
+function findModuleFederationConfigs(tree, scan, unresolved) {
+    const configs = new Set();
+    const visited = new Set();
+    const visit = (fromDir, specifier, importer) => {
+        if (MODULE_FEDERATION_SPECIFIER.test(specifier)) {
+            configs.add(importer);
+            return;
+        }
+        if (specifier.startsWith('.')) {
+            const filePath = resolveFile(tree, (0, devkit_1.joinPathFragments)(fromDir, specifier));
+            if (!filePath) {
+                unresolved.push(`${importer} loads "${specifier}", which is missing`);
+                return;
+            }
+            if (visited.has(filePath)) {
+                return;
+            }
+            visited.add(filePath);
+            const { specifiers, computed } = readModuleSpecifiers(filePath, tree.read(filePath, 'utf-8'));
+            if (computed) {
+                unresolved.push(`${filePath} has a computed require or import`);
+            }
+            for (const s of specifiers) {
+                visit((0, path_1.dirname)(filePath), s, filePath);
+            }
+            return;
+        }
+        if (!(0, internal_1.isBuiltinModuleImport)(specifier) &&
+            !isInstalledPackage(tree, fromDir, specifier, scan)) {
+            unresolved.push(`${importer} loads "${specifier}", which is not an installed package`);
+        }
+    };
+    const projectRoots = new Set();
+    const visitTarget = (executor, target, workspaceRoot, projectRoot, label) => {
+        if (!isAngularWebpackExecutor(executor)) {
+            return;
+        }
+        projectRoots.add(projectRoot);
+        for (const options of [
+            target.options,
+            ...Object.values(target.configurations ?? {}),
+        ]) {
+            for (const specifier of getWebpackConfigSpecifiers(executor, options ?? {}, projectRoot)) {
+                visit(workspaceRoot, specifier, label);
+            }
+        }
+    };
+    const targetDefaults = (0, devkit_1.readNxJson)(tree)?.targetDefaults;
+    for (const [projectName, project] of (0, devkit_1.getProjects)(tree)) {
+        for (const [targetName, target] of Object.entries(project.targets ?? {})) {
+            const defaults = (0, internal_1.readTargetDefaultsForTarget)(targetName, targetDefaults, target.executor, {
+                projectName,
+                projectNode: {
+                    name: projectName,
+                    type: project.projectType === 'application' ? 'app' : 'lib',
+                    data: project,
+                },
+            });
+            const merged = defaults
+                ? (0, internal_1.mergeTargetConfigurations)(target, defaults)
+                : target;
+            visitTarget(merged.executor, merged, '.', project.root, `${projectName}:${targetName}`);
+        }
+    }
+    for (const angularJsonPath of scan.angularJsonPaths) {
+        let angularJson;
+        try {
+            angularJson = (0, devkit_1.readJson)(tree, angularJsonPath);
+        }
+        catch {
+            unresolved.push(`${angularJsonPath} could not be parsed`);
+            continue;
+        }
+        const workspaceRoot = (0, path_1.dirname)(angularJsonPath);
+        for (const [projectName, project] of Object.entries(angularJson.projects ?? {})) {
+            const projectRoot = (0, devkit_1.joinPathFragments)(workspaceRoot, project.root ?? '');
+            for (const [targetName, target] of Object.entries(project.architect ?? project.targets ?? {})) {
+                visitTarget(target.builder, target, workspaceRoot, projectRoot, `${angularJsonPath} ${projectName}:${targetName}`);
+            }
+        }
+    }
+    // Configs a target does not reference directly, such as a remote's
+    // module-federation.config, are found by name.
+    for (const projectRoot of projectRoots) {
+        for (const child of tree.children(projectRoot)) {
+            if (WEBPACK_CONFIG_FILE.test(child)) {
+                visit(projectRoot, `./${child}`, projectRoot);
+            }
+        }
+    }
+    return [...configs];
+}
+function isAngularWebpackExecutor(executor) {
+    return (!!executor &&
+        (NX_WEBPACK_EXECUTORS.has(executor) ||
+            executor.startsWith('@angular-builders/custom-webpack:') ||
+            executor.startsWith('ngx-build-plus:')));
+}
+// The webpack config modules a target loads, as specifiers relative to the
+// workspace root.
+function getWebpackConfigSpecifiers(executor, options, projectRoot) {
+    const toSpecifier = (path) => `./${path
+        .replace(/^\{workspaceRoot\}\/?/, '')
+        .replace(/\{projectRoot\}/g, projectRoot)}`;
+    const { customWebpackConfig, extraWebpackConfig, plugin } = options;
+    const specifiers = [];
+    if (typeof customWebpackConfig?.path === 'string') {
+        specifiers.push(toSpecifier(customWebpackConfig.path));
+    }
+    else if (customWebpackConfig &&
+        executor.startsWith('@angular-builders/custom-webpack:')) {
+        specifiers.push('./webpack.config.js');
+    }
+    if (typeof extraWebpackConfig === 'string') {
+        specifiers.push(toSpecifier(extraWebpackConfig));
+    }
+    // ngx-build-plus loads a `~` plugin path from the workspace root and
+    // anything else as a module.
+    if (typeof plugin === 'string' && plugin) {
+        specifiers.push(plugin.startsWith('~') ? toSpecifier(plugin.slice(1)) : plugin);
+    }
+    return specifiers;
+}
+function resolveFile(tree, path) {
+    return [
+        path,
+        ...RESOLVE_EXTENSIONS.map((extension) => `${path}${extension}`),
+        ...RESOLVE_EXTENSIONS.map((extension) => (0, devkit_1.joinPathFragments)(path, `index${extension}`)),
+    ].find((candidate) => tree.isFile(candidate));
+}
+// A package installed in a node_modules folder the importer resolves from, or
+// declared by the importer's nearest package.json for Yarn PnP installs, which
+// have no node_modules. A workspace package or path alias points back into the
+// workspace, so it is not one.
+function isInstalledPackage(tree, fromDir, specifier, scan) {
+    const segments = specifier.split('/');
+    const packageName = segments
+        .slice(0, specifier.startsWith('@') ? 2 : 1)
+        .join('/');
+    if (scan.workspacePackages.has(packageName)) {
+        return false;
+    }
+    let nearestPackageJsonChecked = false;
+    for (let dir = fromDir;; dir = (0, path_1.dirname)(dir)) {
+        if (tree.exists((0, devkit_1.joinPathFragments)(dir, 'node_modules', packageName, 'package.json'))) {
+            return true;
+        }
+        const declared = scan.declaredDependencies.get(dir);
+        if (declared && !nearestPackageJsonChecked) {
+            nearestPackageJsonChecked = true;
+            if (declared.has(packageName)) {
+                return true;
+            }
+        }
+        if (dir === '.') {
+            return false;
+        }
+    }
+}
+// Specifiers of `import`/`export ... from`, `import x = require()`,
+// `import()` and `require()`. `computed` is set when an `import()` or
+// `require()` takes a value other than a string literal.
+function readModuleSpecifiers(filePath, content) {
+    ts ??= (0, internal_2.ensureTypescript)();
+    const sourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true);
+    const specifiers = [];
+    let computed = false;
+    const visit = (node) => {
+        if ((ts.isImportDeclaration(node) || ts.isExportDeclaration(node)) &&
+            node.moduleSpecifier &&
+            ts.isStringLiteral(node.moduleSpecifier)) {
+            specifiers.push(node.moduleSpecifier.text);
+        }
+        else if (ts.isExternalModuleReference(node) &&
+            ts.isStringLiteral(node.expression)) {
+            specifiers.push(node.expression.text);
+        }
+        else if (ts.isCallExpression(node) &&
+            (node.expression.kind === ts.SyntaxKind.ImportKeyword ||
+                (ts.isIdentifier(node.expression) &&
+                    node.expression.text === 'require'))) {
+            const [argument] = node.arguments;
+            if (argument && ts.isStringLiteralLike(argument)) {
+                specifiers.push(argument.text);
+            }
+            else {
+                computed = true;
+            }
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return { specifiers, computed };
+}

package/dist/src/migrations/update-24-0-0/upgrade-to-angular-22-2.md

@@ -0,0 +1,46 @@
+#### Upgrade Angular to 22.2
+
+Updates the Angular packages of an Angular 22.1 workspace to 22.2, unless the workspace uses Cypress component testing or webpack Module Federation in an Angular project.
+
+Angular 22.2 installs webpack 5.111 and webpack-dev-server 6 through `@angular-devkit/build-angular`. Cypress rejects that webpack-dev-server when it starts Angular component tests ([cypress-io/cypress#34259](https://github.com/cypress-io/cypress/issues/34259)). Module Federation builds fail on that webpack ([module-federation/core#5077](https://github.com/module-federation/core/issues/5077)). The migration keeps the workspace on Angular 22.1 and reports why when it finds either of these:
+
+- An import from `cypress/angular`, `@cypress/angular` or one of their variants, or from `@nx/angular/plugins/component-testing`, in any file of the workspace.
+- An import from `@module-federation/enhanced`, `@module-federation/node`, `@nx/module-federation`, `@nx/angular/mf` or `@nx/angular/module-federation` in the webpack config of an Angular project.
+
+An Angular project is one with an `@nx/angular` webpack or Module Federation executor, an `@angular-builders/custom-webpack` builder or an `ngx-build-plus` builder. Targets are read from `project.json`, including executors inherited from `targetDefaults`, and from every `angular.json`. The migration reads the webpack configs these targets reference, the `webpack*` and `module-federation.config` files in the project root, and every file they import through a relative path. When a config imports something the migration cannot follow, such as a path alias or a workspace package, a Module Federation import anywhere in the workspace also keeps Angular 22.1.
+
+Rspack builds, Native Federation and `@angular-architects/module-federation` don't hold the update. The last one uses the container plugin built into webpack, which works with webpack 5.111.
+
+The migration updates only the packages that the root `package.json` declares, and a catalog reference is updated in the catalog. `@angular/core` is added to `dependencies` when the root doesn't declare it. A later Nx migration updates a workspace kept on Angular 22.1 once the upstream issues are fixed.
+
+#### Examples
+
+##### Before
+
+```jsonc title="package.json"
+{
+  "dependencies": {
+    "@angular/common": "~22.1.0",
+    "@angular/core": "~22.1.0",
+  },
+  "devDependencies": {
+    "@angular/cli": "~22.1.0",
+    "@angular-devkit/build-angular": "~22.1.0",
+  },
+}
+```
+
+##### After
+
+```jsonc title="package.json"
+{
+  "dependencies": {
+    "@angular/common": "~22.2.0",
+    "@angular/core": "~22.2.0",
+  },
+  "devDependencies": {
+    "@angular/cli": "~22.2.0",
+    "@angular-devkit/build-angular": "~22.2.0",
+  },
+}
+```

package/dist/src/utils/assert-cypress-component-testing-support.js

@@ -12,6 +12,16 @@ const minCypressVersion = '15.20.1';
  */
 function assertCypressComponentTestingSupport(tree) {
     const angularVersion = (0, internal_1.getResolvedPackageVersion)(tree, '@angular/core');
+    // Cypress loads webpack-dev-server from build-angular, so its version decides
+    // this check. Angular core stands in when build-angular isn't declared.
+    const buildAngularVersion = (0, internal_1.getResolvedPackageVersion)(tree, '@angular-devkit/build-angular') ??
+        angularVersion;
+    if (buildAngularVersion &&
+        (0, semver_1.gte)((0, semver_1.coerce)(buildAngularVersion)?.version ?? buildAngularVersion, '22.2.0')) {
+        throw new Error(`Cypress Component Testing doesn't support Angular 22.2 and higher yet. ` +
+            `Cypress rejects the webpack-dev-server 6 that @angular-devkit/build-angular 22.2 and higher installs. ` +
+            `See https://github.com/cypress-io/cypress/issues/34259.`);
+    }
     if (!angularVersion) {
         return;
     }

package/dist/src/utils/versions.d.ts

@@ -1,7 +1,7 @@
 export declare const nxVersion: any;
-export declare const angularVersion = "~22.1.0";
-export declare const angularDevkitVersion = "~22.1.0";
-export declare const ngPackagrVersion = "~22.1.0";
+export declare const angularVersion = "~22.2.0";
+export declare const angularDevkitVersion = "~22.2.0";
+export declare const ngPackagrVersion = "~22.2.0";
 export declare const ngrxVersion = "^22.0.0";
 export declare const rxjsVersion = "~7.8.0";
 export declare const zoneJsVersion = "~0.16.2";
@@ -10,7 +10,7 @@ export declare const expressVersion = "^4.21.2";
 export declare const typesExpressVersion = "^4.17.21";
 export declare const browserSyncVersion = "^3.0.0";
 export declare const webpackMergeVersion = "^5.8.0";
-export declare const angularEslintVersion = "^22.1.0";
+export declare const angularEslintVersion = "^22.5.0";
 export declare const typescriptEslintVersion = "^8.40.0";
 export declare const postcssVersion = "^8.4.5";
 export declare const postcssUrlVersion = "~10.1.3";

package/dist/src/utils/versions.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.jsoncEslintParserVersion = exports.oxcProjectRuntimeVersion = exports.jsdomVersion = exports.vitestVersion = exports.jasmineMarblesVersion = exports.typesNodeVersion = exports.jestPresetAngularVersion = exports.lessVersion = exports.tsNodeVersion = exports.autoprefixerVersion = exports.postcssUrlVersion = exports.postcssVersion = exports.typescriptEslintVersion = exports.angularEslintVersion = exports.webpackMergeVersion = exports.browserSyncVersion = exports.typesExpressVersion = exports.expressVersion = exports.tsLibVersion = exports.zoneJsVersion = exports.rxjsVersion = exports.ngrxVersion = exports.ngPackagrVersion = exports.angularDevkitVersion = exports.angularVersion = exports.nxVersion = void 0;
 const path_1 = require("path");
 exports.nxVersion = require((0, path_1.join)('@nx/angular', 'package.json')).version;
-exports.angularVersion = '~22.1.0';
-exports.angularDevkitVersion = '~22.1.0';
-exports.ngPackagrVersion = '~22.1.0';
+exports.angularVersion = '~22.2.0';
+exports.angularDevkitVersion = '~22.2.0';
+exports.ngPackagrVersion = '~22.2.0';
 exports.ngrxVersion = '^22.0.0';
 exports.rxjsVersion = '~7.8.0';
 exports.zoneJsVersion = '~0.16.2';
@@ -14,7 +14,7 @@ exports.expressVersion = '^4.21.2';
 exports.typesExpressVersion = '^4.17.21';
 exports.browserSyncVersion = '^3.0.0';
 exports.webpackMergeVersion = '^5.8.0';
-exports.angularEslintVersion = '^22.1.0';
+exports.angularEslintVersion = '^22.5.0';
 exports.typescriptEslintVersion = '^8.40.0';
 exports.postcssVersion = '^8.4.5';
 exports.postcssUrlVersion = '~10.1.3';

package/dist/types/nx-angular.d.ts

@@ -1,3 +1 @@
-
-export { };
-//# sourceMappingURL=nx-angular.d.ts.map
+export {}

package/migrations.json

@@ -372,6 +372,16 @@
       "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"
+    },
+    "update-24-0-0-upgrade-to-angular-22-2": {
+      "version": "24.0.0-beta.4",
+      "requires": {
+        "@angular/core": ">=22.1.0 <22.2.0"
+      },
+      "optionalUpdate": true,
+      "description": "Update the Angular packages to 22.2 unless the workspace uses Cypress component testing or webpack Module Federation in an Angular project, which break with the webpack-dev-server and webpack versions Angular 22.2 installs.",
+      "factory": "./dist/src/migrations/update-24-0-0/upgrade-to-angular-22-2",
+      "documentation": "./dist/src/migrations/update-24-0-0/upgrade-to-angular-22-2.md"
     }
   },
   "packageJsonUpdates": {
@@ -2323,6 +2333,93 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "24.0.0-angular-eslint": {
+      "version": "24.0.0-beta.4",
+      "requires": {
+        "@angular/core": ">= 22.0.0 < 23.0.0",
+        "typescript-eslint": "^8.0.0",
+        "eslint": "^9.0.0 || ^10.0.0"
+      },
+      "packages": {
+        "angular-eslint": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/eslint-plugin": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/eslint-plugin-template": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/template-parser": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/utils": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/schematics": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/test-utils": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/builder": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/bundled-angular-compiler": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "24.0.0-@angular-eslint": {
+      "version": "24.0.0-beta.4",
+      "requires": {
+        "@angular/core": ">= 22.0.0 < 23.0.0",
+        "eslint": "^9.0.0 || ^10.0.0"
+      },
+      "packages": {
+        "@angular-eslint/eslint-plugin": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/eslint-plugin-template": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/template-parser": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/utils": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/schematics": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/test-utils": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/builder": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-eslint/bundled-angular-compiler": {
+          "version": "^22.5.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "24.0.0-beta.3",
+  "version": "24.0.0-beta.4",
   "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.",
@@ -67,9 +67,9 @@
     "supportsOptionalMigrations": true
   },
   "dependencies": {
-    "@nx/devkit": "24.0.0-beta.3",
-    "@nx/eslint": "24.0.0-beta.3",
-    "@nx/js": "24.0.0-beta.3",
+    "@nx/devkit": "24.0.0-beta.4",
+    "@nx/eslint": "24.0.0-beta.4",
+    "@nx/js": "24.0.0-beta.4",
     "@phenomnomnominal/tsquery": "~6.2.0",
     "@typescript-eslint/type-utils": "^8.0.0",
     "jsonc-parser": "^3.2.0",
@@ -80,20 +80,20 @@
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@nx/storybook": "24.0.0-beta.3",
-    "@nx/vitest": "24.0.0-beta.3",
-    "nx": "24.0.0-beta.3"
+    "@nx/storybook": "24.0.0-beta.4",
+    "@nx/vitest": "24.0.0-beta.4",
+    "nx": "24.0.0-beta.4"
   },
   "peerDependencies": {
     "@angular/build": ">= 20.0.0 < 23.0.0",
     "@angular-devkit/build-angular": ">= 20.0.0 < 23.0.0",
     "@angular-devkit/core": ">= 20.0.0 < 23.0.0",
     "@angular-devkit/schematics": ">= 20.0.0 < 23.0.0",
-    "@nx/cypress": "24.0.0-beta.3",
-    "@nx/playwright": "24.0.0-beta.3",
+    "@nx/cypress": "24.0.0-beta.4",
+    "@nx/playwright": "24.0.0-beta.4",
     "@schematics/angular": ">= 20.0.0 < 23.0.0",
-    "@nx/rspack": "24.0.0-beta.3",
-    "@nx/webpack": "24.0.0-beta.3",
+    "@nx/rspack": "24.0.0-beta.4",
+    "@nx/webpack": "24.0.0-beta.4",
     "ng-packagr": ">= 20.0.0 < 23.0.0",
     "rxjs": "^6.5.3 || ^7.5.0",
     "webpack-merge": "^5.8.0"

package/dist/fesm2022/nx-angular.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"nx-angular.mjs","sources":["../../nx-angular.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;;AAEG"}

package/dist/types/nx-angular.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"nx-angular.d.ts","sources":[],"mappings":"","names":[]}