@nx/angular 22.2.2 → 22.3.0-beta.0

package/src/generators/application/lib/update-tsconfig-files.js

@@ -4,8 +4,8 @@ exports.updateTsconfigFiles = updateTsconfigFiles;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
 const configuration_1 = require("@nx/js/src/utils/typescript/configuration");
-const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const semver_1 = require("semver");
+const tsconfig_utils_1 = require("../../utils/tsconfig-utils");
 const update_app_editor_tsconfig_excluded_files_1 = require("../../utils/update-app-editor-tsconfig-excluded-files");
 const version_utils_1 = require("../../utils/version-utils");
 const enable_strict_type_checking_1 = require("./enable-strict-type-checking");
@@ -16,24 +16,22 @@ function updateTsconfigFiles(tree, options) {
         skipLibCheck: true,
         experimentalDecorators: true,
         importHelpers: true,
+        isolatedModules: true,
         target: 'es2022',
         moduleResolution: 'bundler',
     };
     const rootTsConfigPath = (0, js_1.getRootTsConfigFileName)(tree);
     const { major: angularMajorVersion, version: angularVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
-    if ((0, semver_1.lt)(angularVersion, '18.1.0')) {
-        compilerOptions.useDefineForClassFields = false;
-    }
-    if ((0, semver_1.gte)(angularVersion, '18.2.0')) {
-        compilerOptions.isolatedModules = true;
-    }
     if ((0, semver_1.gte)(angularVersion, '19.1.0')) {
         // Angular started warning about emitDecoratorMetadata and isolatedModules
         // in v19.1.0. If enabled in the root tsconfig, we need to disable it.
-        if (shouldDisableEmitDecoratorMetadata(tree, rootTsConfigPath)) {
+        if ((0, tsconfig_utils_1.getDefinedCompilerOption)(tree, rootTsConfigPath, 'emitDecoratorMetadata') === true) {
             compilerOptions.emitDecoratorMetadata = false;
         }
     }
+    if (angularMajorVersion >= 21) {
+        compilerOptions.moduleResolution = 'bundler';
+    }
     if (angularMajorVersion >= 20) {
         compilerOptions.module = 'preserve';
     }
@@ -82,12 +80,3 @@ function updateEditorTsConfig(tree, options) {
     const project = (0, devkit_1.readProjectConfiguration)(tree, options.name);
     (0, update_app_editor_tsconfig_excluded_files_1.updateAppEditorTsConfigExcludedFiles)(tree, project);
 }
-function shouldDisableEmitDecoratorMetadata(tree, tsConfigPath) {
-    const ts = (0, ensure_typescript_1.ensureTypescript)();
-    const tsSysFromTree = {
-        ...ts.sys,
-        readFile: (path) => tree.read(path, 'utf-8'),
-    };
-    const parsed = ts.parseJsonConfigFileContent(ts.readConfigFile(tsConfigPath, tsSysFromTree.readFile).config, tsSysFromTree, tree.root);
-    return parsed.options.emitDecoratorMetadata === true;
-}

package/src/generators/application/lib/validate-options.d.ts

@@ -0,0 +1,4 @@
+import type { Tree } from '@nx/devkit';
+import type { Schema } from '../schema';
+export declare function validateOptions(tree: Tree, options: Schema): void;
+//# sourceMappingURL=validate-options.d.ts.map

package/src/generators/application/lib/validate-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate-options.d.ts","sourceRoot":"","sources":["../../../../../../../packages/angular/src/generators/application/lib/validate-options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAGvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAExC,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,QA6B1D"}

package/src/generators/application/lib/validate-options.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateOptions = validateOptions;
+const test_runners_1 = require("../../../utils/test-runners");
+const version_utils_1 = require("../../utils/version-utils");
+function validateOptions(tree, options) {
+    const { major: angularMajorVersion, version: angularVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    if (angularMajorVersion < 21) {
+        if (options.zoneless) {
+            throw new Error(`The "zoneless" option is only supported for Angular versions >= 21.0.0. You are using Angular ${angularVersion}.`);
+        }
+    }
+    if (options.unitTestRunner === test_runners_1.UnitTestRunner.VitestAngular) {
+        if (angularMajorVersion < 21) {
+            throw new Error(`The "vitest-angular" unit test runner requires Angular v21 or higher. ` +
+                `Detected Angular v${angularVersion}. Use "vitest-analog" or "jest" instead.`);
+        }
+        // Only fail if bundler is explicitly set to a non-esbuild value.
+        // If bundler is undefined, it will default to 'esbuild' for Angular v21+.
+        if (options.bundler && options.bundler !== 'esbuild') {
+            throw new Error(`The "vitest-angular" unit test runner requires the "esbuild" bundler ` +
+                `which uses the "@angular/build:application" executor. ` +
+                `Use "vitest-analog" or "jest" instead. Or use the "esbuild" bundler.`);
+        }
+    }
+}

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

@@ -31,4 +31,5 @@ export interface Schema {
   serverRouting?: boolean;
   nxCloudToken?: string;
   addPlugin?: boolean;
+  zoneless?: boolean;
 }

package/src/generators/application/schema.json

@@ -99,10 +99,9 @@
     },
     "unitTestRunner": {
       "type": "string",
-      "enum": ["jest", "vitest", "none"],
-      "description": "Test runner to use for unit tests.",
-      "x-prompt": "Which unit test runner would you like to use?",
-      "default": "jest"
+      "enum": ["vitest-angular", "vitest-analog", "jest", "none"],
+      "description": "Test runner to use for unit tests. `vitest-angular` uses the `@angular/build:unit-test` executor (requires Angular v21+ and the `esbuild` bundler). `vitest-analog` uses AnalogJS-based setup with `@nx/vitest`. It defaults to `vitest-angular` when using the `esbuild` bundler for Angular versions >= 21.0.0, `vitest-analog` when using other bundlers on Angular >= 21.0.0, otherwise `jest`.",
+      "x-prompt": "Which unit test runner would you like to use?"
     },
     "e2eTestRunner": {
       "type": "string",
@@ -179,6 +178,10 @@
     "serverRouting": {
       "description": "Creates a server application using the Server Routing and App Engine APIs for application using the `application` builder (Developer Preview). _Note: this is only supported in Angular versions 19.x.x_. From Angular 20 onwards, SSR will always enable server routing when using the `application` builder.",
       "type": "boolean"
+    },
+    "zoneless": {
+      "description": "Generate an application that does not use `zone.js`. It defaults to `true`. _Note: this is only supported in Angular versions >= 21.0.0_",
+      "type": "boolean"
     }
   },
   "additionalProperties": false,

package/src/generators/component/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/component/component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAUvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,iBA6FtE;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/component/component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAgBvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,iBA6FtE;AAED,eAAe,kBAAkB,CAAC"}

package/src/generators/component/component.js

@@ -2,12 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentGenerator = componentGenerator;
 const devkit_1 = require("@nx/devkit");
+const zoneless_1 = require("../../utils/zoneless");
 const utils_1 = require("../utils");
 const version_utils_1 = require("../utils/version-utils");
 const lib_1 = require("./lib");
 async function componentGenerator(tree, rawOptions) {
     const options = await (0, lib_1.normalizeOptions)(tree, rawOptions);
     const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    const project = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
+    const zoneless = (0, zoneless_1.isZonelessApp)(project);
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files'), options.directory, {
         name: options.name,
         fileName: options.fileName,
@@ -22,11 +25,9 @@ async function componentGenerator(tree, rawOptions) {
         viewEncapsulation: options.viewEncapsulation,
         displayBlock: options.displayBlock,
         selector: options.selector,
-        // Angular v19 or higher defaults to true, while lower versions default to false
-        setStandalone: (angularMajorVersion >= 19 && !options.standalone) ||
-            (angularMajorVersion < 19 && options.standalone),
         angularMajorVersion,
         ngext: options.ngHtml ? '.ng' : '',
+        zoneless,
         tpl: '',
     });
     if (options.skipTests) {

package/src/generators/component/files/__fileName__.spec.ts__tpl__

@@ -12,7 +12,7 @@ describe('<%= symbolName %>', () => {
 
     fixture = TestBed.createComponent(<%= symbolName %>);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    <%= zoneless ? 'await fixture.whenStable();' : 'fixture.detectChanges();' %>
   });
 
   it('should create', () => {

package/src/generators/component/files/__fileName__.ts__tpl__

@@ -1,7 +1,7 @@
 import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%>Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%> } from '@angular/core';
 
 @Component({<% if(!skipSelector) {%>
-  selector: '<%= selector %>',<%}%><% if (setStandalone) { %>
+  selector: '<%= selector %>',<%}%><% if (!standalone) { %>
   standalone: <%= standalone %>,<% } %>
   imports: [],<% if(inlineTemplate) { %>
   template: `<p><%= name %> works!</p>`<% } else { %>

package/src/generators/component-test/component-test.d.ts

@@ -1,5 +1,5 @@
-import { Tree } from '@nx/devkit';
-import { ComponentTestSchema } from './schema';
-export declare function componentTestGenerator(tree: Tree, options: ComponentTestSchema): Promise<void>;
+import { type GeneratorCallback, type Tree } from '@nx/devkit';
+import type { ComponentTestSchema } from './schema';
+export declare function componentTestGenerator(tree: Tree, options: ComponentTestSchema): Promise<GeneratorCallback>;
 export default componentTestGenerator;
 //# sourceMappingURL=component-test.d.ts.map

package/src/generators/component-test/component-test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-test.d.ts","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/component-test/component-test.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,IAAI,EACL,MAAM,YAAY,CAAC;AAMpB,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C,wBAAsB,sBAAsB,CAC1C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,mBAAmB,iBAuC7B;AAED,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"component-test.d.ts","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/component-test/component-test.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,iBAAiB,EACtB,KAAK,IAAI,EACV,MAAM,YAAY,CAAC;AAOpB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,wBAAsB,sBAAsB,CAC1C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,mBAAmB,8BAyD7B;AAED,eAAe,sBAAsB,CAAC"}

package/src/generators/component-test/component-test.js

@@ -4,6 +4,7 @@ exports.componentTestGenerator = componentTestGenerator;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
 const storybook_inputs_1 = require("../utils/storybook-ast/storybook-inputs");
+const version_utils_1 = require("../utils/version-utils");
 async function componentTestGenerator(tree, options) {
     (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
     const { root } = (0, devkit_1.readProjectConfiguration)(tree, options.project);
@@ -21,8 +22,16 @@ async function componentTestGenerator(tree, options) {
             tpl: '',
         });
     }
+    const tasks = [];
+    if (!options.skipPackageJson) {
+        // Cypress CT still requires @angular/platform-browser-dynamic
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+            '@angular/platform-browser-dynamic': (0, version_utils_1.versions)(tree).angularVersion,
+        }, undefined, true));
+    }
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.default = componentTestGenerator;

package/src/generators/component-test/schema.d.ts

@@ -9,4 +9,5 @@ export interface ComponentTestSchema {
   // something.component
   componentFileName: string;
   skipFormat?: boolean;
+  skipPackageJson?: boolean;
 }

package/src/generators/component-test/schema.json

@@ -41,6 +41,12 @@
       "type": "boolean",
       "default": false,
       "x-priority": "internal"
+    },
+    "skipPackageJson": {
+      "type": "boolean",
+      "default": false,
+      "description": "Do not add dependencies to `package.json`.",
+      "x-priority": "internal"
     }
   },
   "additionalProperties": false,

package/src/generators/convert-to-rspack/convert-to-rspack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"convert-to-rspack.d.ts","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/convert-to-rspack/convert-to-rspack.ts"],"names":[],"mappings":"AAAA,OAAO,EAcL,KAAK,iBAAiB,EAEtB,KAAK,IAAI,EACV,MAAM,YAAY,CAAC;AAapB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AA6StD,wBAAsB,eAAe,CACnC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,qBAAqB,8BAuZ9B;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"convert-to-rspack.d.ts","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/convert-to-rspack/convert-to-rspack.ts"],"names":[],"mappings":"AAAA,OAAO,EAcL,KAAK,iBAAiB,EAEtB,KAAK,IAAI,EACV,MAAM,YAAY,CAAC;AAapB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AA6StD,wBAAsB,eAAe,CACnC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,qBAAqB,8BAiZ9B;AAED,eAAe,eAAe,CAAC"}

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

@@ -250,10 +250,6 @@ async function convertToRspack(tree, schema) {
     const targetsToRemove = [];
     let customWebpackConfigPath;
     (0, validate_supported_executor_1.validateSupportedBuildExecutor)(Object.values(project.targets));
-    const angularRspackVersion = (0, version_utils_1.getAngularRspackVersion)(tree);
-    if (!angularRspackVersion) {
-        throw new Error('Angular Rspack requires Angular 19 or higher. Please upgrade your Angular version before converting to Rspack.');
-    }
     let projectServePort = DEFAULT_PORT;
     const projectServeConfigurationOptions = {};
     for (const [targetName, target] of Object.entries(project.targets)) {
@@ -508,6 +504,7 @@ async function convertToRspack(tree, schema) {
     }
     if (!schema.skipInstall) {
         const { webpackMergeVersion, tsNodeVersion } = (0, version_utils_1.versions)(tree);
+        const angularRspackVersion = (0, version_utils_1.getAngularRspackVersion)(tree);
         const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
             '@nx/angular-rspack': angularRspackVersion,
             'webpack-merge': webpackMergeVersion,

package/src/generators/cypress-component-configuration/cypress-component-configuration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cypress-component-configuration.d.ts","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/cypress-component-configuration/cypress-component-configuration.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,iBAAiB,EAIjB,IAAI,EAEL,MAAM,YAAY,CAAC;AAWpB,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AAExD;;;GAGG;AACH,wBAAsB,6BAA6B,CACjD,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,4BAA4B,GACpC,OAAO,CAAC,iBAAiB,CAAC,CAwB5B;AA4HD,eAAe,6BAA6B,CAAC"}
+{"version":3,"file":"cypress-component-configuration.d.ts","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/cypress-component-configuration/cypress-component-configuration.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,iBAAiB,EAMjB,IAAI,EAEL,MAAM,YAAY,CAAC;AAYpB,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AAgBxD;;;GAGG;AACH,wBAAsB,6BAA6B,CACjD,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,4BAA4B,GACpC,OAAO,CAAC,iBAAiB,CAAC,CA+C5B;AAmJD,eAAe,6BAA6B,CAAC"}

package/src/generators/cypress-component-configuration/cypress-component-configuration.js

@@ -3,61 +3,101 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.cypressComponentConfiguration = cypressComponentConfiguration;
 const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
+const zoneless_1 = require("../../utils/zoneless");
 const versions_1 = require("../../utils/versions");
 const component_test_1 = require("../component-test/component-test");
 const component_info_1 = require("../utils/storybook-ast/component-info");
 const entry_point_1 = require("../utils/storybook-ast/entry-point");
 const module_info_1 = require("../utils/storybook-ast/module-info");
 const update_app_editor_tsconfig_excluded_files_1 = require("../utils/update-app-editor-tsconfig-excluded-files");
+const webpackExecutors = new Set([
+    '@nx/angular:webpack-browser',
+    '@nrwl/angular:webpack-browser',
+    '@angular-devkit/build-angular:browser',
+]);
+const esbuildExecutors = new Set([
+    '@angular/build:application',
+    '@angular-devkit/build-angular:application',
+    '@nx/angular:application',
+    '@angular-devkit/build-angular:browser-esbuild',
+    '@nx/angular:browser-esbuild',
+]);
 /**
  * This is for cypress built in component testing, if you want to test with
  * storybook + cypress then use the componentCypressGenerator instead.
  */
 async function cypressComponentConfiguration(tree, options) {
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    // Cypress Component Testing requires Zone.js
+    let isZoneless;
+    if (projectConfig.projectType === 'application') {
+        // For applications, check the polyfills in the build target
+        isZoneless = (0, zoneless_1.isZonelessApp)(projectConfig);
+    }
+    else {
+        // For libraries, check if zone.js is installed in the workspace
+        isZoneless = (0, devkit_1.getDependencyVersionFromPackageJson)(tree, 'zone.js') === null;
+    }
+    if (isZoneless) {
+        throw new Error(`Cypress Component Testing doesn't support Zoneless Angular projects yet. ` +
+            `The project "${options.project}" is configured without Zone.js. ` +
+            `See https://github.com/cypress-io/cypress/issues/31504.`);
+    }
     const { componentConfigurationGenerator: baseCyCTConfig } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-    const installTask = await baseCyCTConfig(tree, {
+    const tasks = [];
+    tasks.push(await baseCyCTConfig(tree, {
         project: options.project,
         skipFormat: true,
         addPlugin: false,
         addExplicitTargets: true,
-    });
+        skipPackageJson: options.skipPackageJson,
+    }));
     await configureCypressCT(tree, options);
-    await addFiles(tree, projectConfig, options);
+    tasks.push(await addFiles(tree, projectConfig, options));
     if (projectConfig.projectType === 'application') {
         (0, update_app_editor_tsconfig_excluded_files_1.updateAppEditorTsConfigExcludedFiles)(tree, projectConfig);
     }
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
-    return installTask;
+    return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 async function addFiles(tree, projectConfig, options) {
     const componentFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress', 'support', 'component.ts');
     const { addMountDefinition } = require('@nx/cypress/src/utils/config');
     const updatedCmpContents = await addMountDefinition(tree.read(componentFile, 'utf-8'));
     tree.write(componentFile, `import { mount } from 'cypress/angular';\n${updatedCmpContents}`);
-    if (options.generateTests) {
-        const entryPoints = (0, entry_point_1.getProjectEntryPoints)(tree, options.project);
-        const componentInfo = [];
-        for (const entryPoint of entryPoints) {
-            const moduleFilePaths = (0, module_info_1.getModuleFilePaths)(tree, entryPoint);
-            componentInfo.push(...(0, component_info_1.getComponentsInfo)(tree, entryPoint, moduleFilePaths, options.project), ...(0, component_info_1.getStandaloneComponentsInfo)(tree, entryPoint));
+    if (!options.generateTests) {
+        return () => { };
+    }
+    const entryPoints = (0, entry_point_1.getProjectEntryPoints)(tree, options.project);
+    const componentInfo = [];
+    for (const entryPoint of entryPoints) {
+        const moduleFilePaths = (0, module_info_1.getModuleFilePaths)(tree, entryPoint);
+        componentInfo.push(...(0, component_info_1.getComponentsInfo)(tree, entryPoint, moduleFilePaths, options.project), ...(0, component_info_1.getStandaloneComponentsInfo)(tree, entryPoint));
+    }
+    let ctTask;
+    for (const info of componentInfo) {
+        if (info === undefined) {
+            continue;
         }
-        for (const info of componentInfo) {
-            if (info === undefined) {
-                continue;
-            }
-            const componentDirFromProjectRoot = (0, path_1.relative)(projectConfig.root, (0, devkit_1.joinPathFragments)(info.moduleFolderPath, info.path));
-            await (0, component_test_1.componentTestGenerator)(tree, {
-                project: options.project,
-                componentName: info.name,
-                componentDir: componentDirFromProjectRoot,
-                componentFileName: info.componentFileName,
-                skipFormat: true,
-            });
+        const componentDirFromProjectRoot = (0, path_1.relative)(projectConfig.root, (0, devkit_1.joinPathFragments)(info.moduleFolderPath, info.path));
+        const task = await (0, component_test_1.componentTestGenerator)(tree, {
+            project: options.project,
+            componentName: info.name,
+            componentDir: componentDirFromProjectRoot,
+            componentFileName: info.componentFileName,
+            skipFormat: true,
+            skipPackageJson: options.skipPackageJson,
+        });
+        // the ct generator only installs one dependency, which will only be installed
+        // if !skipPackageJson and not already installed, so only the first run can
+        // result in a generator callback that would actually install the dependency
+        if (!ctTask) {
+            ctTask = task;
         }
     }
+    return ctTask ?? (() => { });
 }
 async function configureCypressCT(tree, options) {
     let found = { target: options.buildTarget, config: undefined };
@@ -66,13 +106,25 @@ async function configureCypressCT(tree, options) {
         found = await findBuildConfig(tree, {
             project: options.project,
             buildTarget: options.buildTarget,
-            validExecutorNames: new Set([
-                '@nx/angular:webpack-browser',
-                '@nrwl/angular:webpack-browser',
-                '@angular-devkit/build-angular:browser',
-            ]),
+            validExecutorNames: webpackExecutors,
         });
-        assertValidConfig(found?.config);
+        if (!found?.config) {
+            // Check if the project uses an esbuild-based executor
+            const esbuildTarget = await findBuildConfig(tree, {
+                project: options.project,
+                validExecutorNames: esbuildExecutors,
+                skipGetOptions: true,
+            });
+            if (esbuildTarget?.target) {
+                const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, esbuildTarget.target.split(':')[0]);
+                const targetName = esbuildTarget.target.split(':')[1];
+                const executor = projectConfig.targets?.[targetName]?.executor;
+                throw new Error(`Cypress Component Testing for Angular requires a webpack-based build target, ` +
+                    `but the project "${options.project}" uses an esbuild-based executor (${executor}).\n\n` +
+                    `Cypress only supports webpack as the bundler for Angular component testing.`);
+            }
+            throw new Error('Unable to find a valid build configuration. Try passing in a target for an Angular app (e.g. --build-target=<project>:<target>[:<configuration>]).');
+        }
     }
     const ctConfigOptions = {};
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
@@ -93,9 +145,4 @@ async function configureCypressCT(tree, options) {
     const updatedCyConfig = await addDefaultCTConfig(tree.read(cypressConfigPath, 'utf-8'), ctConfigOptions);
     tree.write(cypressConfigPath, `import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';\n${updatedCyConfig}`);
 }
-function assertValidConfig(config) {
-    if (!config) {
-        throw new Error('Unable to find a valid build configuration. Try passing in a target for an Angular app. --build-target=<project>:<target>[:<configuration>]');
-    }
-}
 exports.default = cypressComponentConfiguration;

package/src/generators/cypress-component-configuration/schema.d.ts

@@ -3,4 +3,5 @@ export interface CypressComponentConfigSchema {
   generateTests: boolean;
   skipFormat?: boolean;
   buildTarget?: string;
+  skipPackageJson?: boolean;
 }

package/src/generators/cypress-component-configuration/schema.json

@@ -33,6 +33,12 @@
       "description": "Skip formatting files",
       "default": false,
       "x-priority": "internal"
+    },
+    "skipPackageJson": {
+      "type": "boolean",
+      "default": false,
+      "description": "Do not add dependencies to `package.json`.",
+      "x-priority": "internal"
     }
   },
   "required": ["project"],

package/src/generators/directive/directive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"directive.d.ts","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/directive/directive.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAKvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,iBAiDlE;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"directive.d.ts","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/directive/directive.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAKvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,iBA6ClE;AAED,eAAe,kBAAkB,CAAC"}

package/src/generators/directive/directive.js

@@ -13,9 +13,6 @@ async function directiveGenerator(tree, schema) {
         symbolName: options.symbolName,
         fileName: options.fileName,
         standalone: options.standalone,
-        // Angular v19 or higher defaults to true, while lower versions default to false
-        setStandalone: (angularMajorVersion >= 19 && !options.standalone) ||
-            (angularMajorVersion < 19 && options.standalone),
         tpl: '',
     });
     if (options.skipTests) {

package/src/generators/directive/files/__fileName__.ts__tpl__

@@ -1,7 +1,7 @@
 import { Directive } from '@angular/core';
 
 @Directive({
-  selector: '[<%= selector %>]'<% if (setStandalone) { %>,
+  selector: '[<%= selector %>]'<% if (!standalone) { %>,
   standalone: <%= standalone %><% } %>
 })
 export class <%= symbolName %> {

package/src/generators/federate-module/federate-module.d.ts

@@ -1,5 +1,5 @@
 import { type Tree } from '@nx/devkit';
-import { type Schema } from './schema';
+import type { Schema } from './schema';
 export declare function federateModuleGenerator(tree: Tree, schema: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default federateModuleGenerator;
 //# sourceMappingURL=federate-module.d.ts.map

package/src/generators/federate-module/federate-module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"federate-module.d.ts","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/federate-module/federate-module.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,IAAI,EACV,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,UAAU,CAAC;AAQvC,wBAAsB,uBAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,mDAyCvE;AAED,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"federate-module.d.ts","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/federate-module/federate-module.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,IAAI,EACV,MAAM,YAAY,CAAC;AASpB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,wBAAsB,uBAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,mDAgDvE;AAED,eAAe,uBAAuB,CAAC"}

package/src/generators/federate-module/federate-module.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.federateModuleGenerator = federateModuleGenerator;
 const devkit_1 = require("@nx/devkit");
+const test_runners_1 = require("../../utils/test-runners");
+const version_utils_1 = require("../utils/version-utils");
 const lib_1 = require("./lib");
 async function federateModuleGenerator(tree, schema) {
     if (!tree.exists(schema.path)) {
@@ -10,6 +12,12 @@ async function federateModuleGenerator(tree, schema) {
     Path: ${schema.path}`);
     }
     schema.standalone = schema.standalone ?? true;
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    // federate-module uses webpack/rspack bundlers, so vitest-angular is not available
+    schema.unitTestRunner ??=
+        angularMajorVersion >= 21
+            ? test_runners_1.UnitTestRunner.VitestAnalog
+            : test_runners_1.UnitTestRunner.Jest;
     const { tasks, projectRoot, remoteName } = await (0, lib_1.addRemote)(tree, schema);
     (0, lib_1.addFileToRemoteTsconfig)(tree, remoteName, schema.path);
     (0, lib_1.addPathToExposes)(tree, {

package/src/generators/federate-module/lib/add-remote.js

@@ -16,7 +16,7 @@ async function addRemote(tree, schema) {
             directory: schema.remoteDirectory,
             host: schema.host,
             standalone: schema.standalone,
-            unitTestRunner: schema.unitTestRunner ?? test_runners_1.UnitTestRunner.Jest,
+            unitTestRunner: schema.unitTestRunner,
             e2eTestRunner: schema.e2eTestRunner ?? test_runners_1.E2eTestRunner.Cypress,
             skipFormat: true,
         });

package/src/generators/federate-module/schema.d.ts

@@ -1,4 +1,4 @@
-import { UnitTestRunner, E2eTestRunner } from '../utils/testing';
+import type { E2eTestRunner, UnitTestRunner } from '../../utils/test-runners';
 
 export interface Schema {
   name: string;
@@ -6,7 +6,7 @@ export interface Schema {
   remote: string;
   remoteDirectory?: string;
   host?: string;
-  unitTestRunner?: UnitTestRunner;
+  unitTestRunner?: Exclude<UnitTestRunner, UnitTestRunner.VitestAngular>;
   e2eTestRunner?: E2eTestRunner;
   standalone?: boolean;
   skipFormat?: boolean;

package/src/generators/federate-module/schema.json

@@ -57,10 +57,9 @@
     },
     "unitTestRunner": {
       "type": "string",
-      "enum": ["jest", "vitest", "none"],
-      "description": "Test runner to use for unit tests of the Producer (remote) if it needs to be created.",
-      "x-prompt": "Which unit test runner would you like to use?",
-      "default": "jest"
+      "enum": ["vitest-analog", "jest", "none"],
+      "description": "Test runner to use for unit tests of the Producer (remote) if it needs to be created. `vitest-analog` uses AnalogJS-based setup with `@nx/vitest`. It defaults to `vitest-analog` for Angular versions >= 21.0.0, otherwise `jest`.",
+      "x-prompt": "Which unit test runner would you like to use?"
     },
     "e2eTestRunner": {
       "type": "string",

package/src/generators/host/files/common/src/main.server.ts__tmpl__

@@ -1,9 +1,16 @@
+<%_ if (!zoneless && angularMajorVersion < 21) { _%>
 import 'zone.js/node';
 
+<%_ } _%>
 import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine } from '<%= commonEngineEntryPoint %>';
+import { CommonEngine } from '@angular/ssr/node';
+<%_ if (useDefaultImport) { _%>
+import express from 'express';
+import cors from 'cors';
+<%_ } else { _%>
 import * as express from 'express';
 import * as cors from 'cors';
+<%_ } _%>
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 import<% if(standalone) { %> bootstrap <% } else { %> { AppServerModule } <% } %>from './bootstrap.server';

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

@@ -1 +1 @@
-{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/host/host.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,IAAI,EAEL,MAAM,YAAY,CAAC;AAepB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,wBAAsB,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,mDAiIpD;AAED,eAAe,IAAI,CAAC"}
+{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../../../../../../packages/angular/src/generators/host/host.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,IAAI,EAEL,MAAM,YAAY,CAAC;AAgBpB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,wBAAsB,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,mDAgIpD;AAED,eAAe,IAAI,CAAC"}

package/src/generators/host/host.js

@@ -13,13 +13,17 @@ const setup_mf_1 = require("../setup-mf/setup-mf");
 const add_mf_env_to_inputs_1 = require("../utils/add-mf-env-to-inputs");
 const assert_mf_utils_1 = require("../utils/assert-mf-utils");
 const validations_1 = require("../utils/validations");
+const version_utils_1 = require("../utils/version-utils");
 const lib_1 = require("./lib");
 async function host(tree, schema) {
     (0, validations_1.assertNotUsingTsSolutionSetup)(tree, 'host');
+    (0, lib_1.validateOptions)(tree, schema);
     // 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);
+    (0, assert_mf_utils_1.assertRspackIsCSR)(schema.bundler, schema.ssr ?? false);
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    schema.zoneless ??= angularMajorVersion >= 21 ? true : false;
     const { typescriptConfiguration = true, ...options } = schema;
     options.standalone = options.standalone ?? true;
     const projects = (0, devkit_1.getProjects)(tree);

package/src/generators/host/lib/index.d.ts

@@ -1,2 +1,3 @@
 export * from './update-ssr-setup';
+export * from './validate-options';
 //# sourceMappingURL=index.d.ts.map

package/src/generators/host/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/angular/src/generators/host/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/angular/src/generators/host/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}