@nx/angular 18.0.0-beta.1 → 18.0.0-beta.2

package/generators.d.ts

@@ -25,6 +25,6 @@ export * from './src/generators/setup-tailwind/setup-tailwind';
 export * from './src/generators/stories/stories';
 export * from './src/generators/storybook-configuration/storybook-configuration';
 export * from './src/generators/web-worker/web-worker';
-export * from './src/generators/cypress-component-configuration/cypress-component-configuration';
+export { cypressComponentConfiguration } from './src/generators/cypress-component-configuration/cypress-component-configuration';
 export * from './src/generators/component-test/component-test';
 export * from './src/utils/test-runners';

package/generators.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.cypressComponentConfiguration = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./src/generators/add-linting/add-linting"), exports);
 tslib_1.__exportStar(require("./src/generators/application/application"), exports);
@@ -28,6 +29,7 @@ tslib_1.__exportStar(require("./src/generators/setup-tailwind/setup-tailwind"),
 tslib_1.__exportStar(require("./src/generators/stories/stories"), exports);
 tslib_1.__exportStar(require("./src/generators/storybook-configuration/storybook-configuration"), exports);
 tslib_1.__exportStar(require("./src/generators/web-worker/web-worker"), exports);
-tslib_1.__exportStar(require("./src/generators/cypress-component-configuration/cypress-component-configuration"), exports);
+var cypress_component_configuration_1 = require("./src/generators/cypress-component-configuration/cypress-component-configuration");
+Object.defineProperty(exports, "cypressComponentConfiguration", { enumerable: true, get: function () { return cypress_component_configuration_1.cypressComponentConfiguration; } });
 tslib_1.__exportStar(require("./src/generators/component-test/component-test"), exports);
 tslib_1.__exportStar(require("./src/utils/test-runners"), exports);

package/generators.json

@@ -173,7 +173,7 @@
       "description": "Adds Storybook configuration to a project."
     },
     "cypress-component-configuration": {
-      "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration",
+      "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfigurationInternal",
       "schema": "./src/generators/cypress-component-configuration/schema.json",
       "description": "Setup Cypress component testing for a project."
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "18.0.0-beta.1",
+  "version": "18.0.0-beta.2",
   "private": false,
   "description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n\n- Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, 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- Upgrading AngularJS applications \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -78,16 +78,16 @@
     "tslib": "^2.3.0",
     "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "18.0.0-beta.1",
-    "@nx/cypress": "18.0.0-beta.1",
-    "@nx/jest": "18.0.0-beta.1",
-    "@nx/js": "18.0.0-beta.1",
-    "@nx/eslint": "18.0.0-beta.1",
-    "@nx/webpack": "18.0.0-beta.1",
-    "@nx/web": "18.0.0-beta.1",
-    "@nx/workspace": "18.0.0-beta.1",
+    "@nx/devkit": "18.0.0-beta.2",
+    "@nx/cypress": "18.0.0-beta.2",
+    "@nx/jest": "18.0.0-beta.2",
+    "@nx/js": "18.0.0-beta.2",
+    "@nx/eslint": "18.0.0-beta.2",
+    "@nx/webpack": "18.0.0-beta.2",
+    "@nx/web": "18.0.0-beta.2",
+    "@nx/workspace": "18.0.0-beta.2",
     "piscina": "^4.2.1",
-    "@nrwl/angular": "18.0.0-beta.1"
+    "@nrwl/angular": "18.0.0-beta.2"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 15.0.0 < 18.0.0",

package/plugins/component-testing.d.ts

@@ -17,29 +17,4 @@ import { NxComponentTestingOptions } from '@nx/cypress/plugins/cypress-preset';
  * @param pathToConfig will be used for loading project options and to construct the output paths for videos and screenshots
  * @param options override options
  */
-export declare function nxComponentTestingPreset(pathToConfig: string, options?: NxComponentTestingOptions): {
-    specPattern: string[];
-    indexHtmlFile: string;
-    devServer: {
-        options: {
-            projectConfig: {
-                root: string;
-                sourceRoot: string;
-                buildOptions: import("@angular-devkit/build-angular").BrowserBuilderOptions & {
-                    customWebpackConfig?: {
-                        path: string;
-                    };
-                    indexFileTransformer?: string;
-                    buildLibsFromSource?: boolean;
-                } & {
-                    workspaceRoot: string;
-                };
-            };
-        };
-        framework: "angular";
-        bundler: "webpack";
-    };
-    videosFolder: string;
-    screenshotsFolder: string;
-    chromeWebSecurity: boolean;
-};
+export declare function nxComponentTestingPreset(pathToConfig: string, options?: NxComponentTestingOptions): any;

package/plugins/component-testing.js

@@ -26,6 +26,13 @@ const semver_1 = require("semver");
  * @param options override options
  */
 function nxComponentTestingPreset(pathToConfig, options) {
+    if (global.NX_GRAPH_CREATION || global.NX_CYPRESS_INIT_GENERATOR_RUNNING) {
+        // this is only used by plugins, so we don't need the component testing
+        // options, cast to any to avoid type errors
+        return (0, cypress_preset_1.nxBaseCypressPreset)(pathToConfig, {
+            testingType: 'component',
+        });
+    }
     let graph;
     try {
         graph = (0, devkit_1.readCachedProjectGraph)();
@@ -41,7 +48,10 @@ ${e.stack ? e.stack : e}`);
     const ctProjectConfig = (0, ct_helpers_1.getProjectConfigByPath)(graph, pathToConfig);
     const ctConfigurationName = process.env.NX_CYPRESS_TARGET_CONFIGURATION;
     const ctContext = (0, ct_helpers_1.createExecutorContext)(graph, ctProjectConfig.targets, ctProjectConfig.name, options?.ctTargetName || 'component-test', ctConfigurationName);
-    const buildTarget = getBuildableTarget(ctContext);
+    const buildTarget = options?.buildTarget
+        ? (0, devkit_1.parseTargetString)(options.buildTarget, graph)
+        : // for backwards compat, if no buildTargetin the preset options, get it from the target options
+            getBuildableTarget(ctContext);
     if (!buildTarget.project && !graph.nodes?.[buildTarget.project]?.data) {
         throw new Error((0, devkit_1.stripIndents) `Unable to find project configuration for build target.
     Project Name? ${buildTarget.project}

package/src/generators/add-linting/add-linting.js

@@ -20,6 +20,7 @@ async function addLintingGenerator(tree, options) {
         setParserOptionsProject: options.setParserOptionsProject,
         skipFormat: true,
         rootProject: rootProject,
+        addPlugin: options.addPlugin,
     });
     tasks.push(lintTask);
     if ((0, eslint_file_1.isEslintConfigSupported)(tree)) {

package/src/generators/add-linting/schema.d.ts

@@ -6,4 +6,5 @@ export interface AddLintingGeneratorSchema {
   skipFormat?: boolean;
   skipPackageJson?: boolean;
   unitTestRunner?: string;
+  addPlugin?: boolean;
 }

package/src/generators/application/application.js

@@ -12,6 +12,7 @@ const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-projec
 async function applicationGenerator(tree, schema) {
     return await applicationGeneratorInternal(tree, {
         projectNameAndRootFormat: 'derived',
+        addPlugin: false,
         ...schema,
     });
 }

package/src/generators/application/files/ng-module/src/app/nx-welcome.component.ts__tpl__

@@ -746,6 +746,25 @@ nx g @nx/angular:lib ui
 <span># Add a component</span>
 nx g &#64;nx/angular:component ui/src/lib/button</pre>
           </details>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              View project details
+            </summary>
+            <pre>nx show project <%= appName %> --web</pre>
+          </details>
           <details>
             <summary>
               <svg

package/src/generators/application/files/standalone-components/src/app/nx-welcome.component.ts__tpl__

@@ -749,6 +749,25 @@ nx g @nx/angular:lib ui
 <span># Add a component</span>
 nx g &#64;nx/angular:component ui/src/lib/button</pre>
           </details>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              View project details
+            </summary>
+            <pre>nx show project <%= appName %> --web</pre>
+          </details>
           <details>
             <summary>
               <svg

package/src/generators/application/lib/add-e2e.js

@@ -26,6 +26,7 @@ async function addE2e(tree, options) {
             devServerTarget: `${options.name}:serve:development`,
             baseUrl: 'http://localhost:4200',
             rootProject: options.rootProject,
+            addPlugin: options.addPlugin,
         });
     }
     else if (options.e2eTestRunner === 'playwright') {
@@ -48,6 +49,7 @@ async function addE2e(tree, options) {
             webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
             webServerAddress: `http://localhost:${options.port ?? 4200}`,
             rootProject: options.rootProject,
+            addPlugin: options.addPlugin,
         });
     }
 }

package/src/generators/application/lib/add-linting.js

@@ -15,6 +15,7 @@ async function addLinting(host, options) {
         skipPackageJson: options.skipPackageJson,
         unitTestRunner: options.unitTestRunner,
         skipFormat: true,
+        addPlugin: options.addPlugin,
     });
 }
 exports.addLinting = addLinting;

package/src/generators/application/lib/add-unit-test-runner.js

@@ -10,6 +10,7 @@ async function addUnitTestRunner(host, options) {
             projectRoot: options.appProjectRoot,
             skipPackageJson: options.skipPackageJson,
             strict: options.strict,
+            addPlugin: options.addPlugin,
         });
     }
 }

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

@@ -19,6 +19,7 @@ async function normalizeOptions(host, options) {
     });
     options.rootProject = appProjectRoot === '.';
     options.projectNameAndRootFormat = projectNameAndRootFormat;
+    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
     const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
     const parsedTags = options.tags

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

@@ -31,4 +31,5 @@ export interface Schema {
   minimal?: boolean;
   bundler?: 'webpack' | 'esbuild';
   ssr?: boolean;
+  addPlugin?: boolean;
 }

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

@@ -1,8 +1,9 @@
 import { Tree } from '@nx/devkit';
 import { CypressComponentConfigSchema } from './schema';
+export declare function cypressComponentConfiguration(tree: Tree, options: CypressComponentConfigSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 /**
  * This is for cypress built in component testing, if you want to test with
  * storybook + cypress then use the componentCypressGenerator instead.
  */
-export declare function cypressComponentConfiguration(tree: Tree, options: CypressComponentConfigSchema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function cypressComponentConfigurationInternal(tree: Tree, options: CypressComponentConfigSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default cypressComponentConfiguration;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cypressComponentConfiguration = void 0;
+exports.cypressComponentConfigurationInternal = exports.cypressComponentConfiguration = void 0;
 const cypress_1 = require("@nx/cypress");
 const config_1 = require("@nx/cypress/src/utils/config");
 const find_target_options_1 = require("@nx/cypress/src/utils/find-target-options");
@@ -10,28 +10,34 @@ 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");
+function cypressComponentConfiguration(tree, options) {
+    return cypressComponentConfigurationInternal(tree, {
+        addPlugin: false,
+        ...options,
+    });
+}
+exports.cypressComponentConfiguration = cypressComponentConfiguration;
 /**
  * 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) {
+async function cypressComponentConfigurationInternal(tree, options) {
+    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const installTask = await (0, cypress_1.componentConfigurationGenerator)(tree, {
         project: options.project,
         skipFormat: true,
+        addPlugin: options.addPlugin,
     });
-    await updateProjectConfig(tree, options);
+    await configureCypressCT(tree, options);
     await addFiles(tree, projectConfig, options);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
     return installTask;
 }
-exports.cypressComponentConfiguration = cypressComponentConfiguration;
+exports.cypressComponentConfigurationInternal = cypressComponentConfigurationInternal;
 async function addFiles(tree, projectConfig, options) {
-    const cyConfigFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress.config.ts');
-    const updatedCyConfig = await (0, config_1.addDefaultCTConfig)(tree.read(cyConfigFile, 'utf-8'));
-    tree.write(cyConfigFile, `import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';\n${updatedCyConfig}`);
     const componentFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress', 'support', 'component.ts');
     const updatedCmpContents = await (0, config_1.addMountDefinition)(tree.read(componentFile, 'utf-8'));
     tree.write(componentFile, `import { mount } from 'cypress/angular';\n${updatedCmpContents}`);
@@ -57,7 +63,7 @@ async function addFiles(tree, projectConfig, options) {
         }
     }
 }
-async function updateProjectConfig(tree, options) {
+async function configureCypressCT(tree, options) {
     let found = { target: options.buildTarget, config: undefined };
     if (!options.buildTarget) {
         found = await (0, find_target_options_1.findBuildConfig)(tree, {
@@ -71,13 +77,23 @@ async function updateProjectConfig(tree, options) {
         });
         assertValidConfig(found?.config);
     }
+    const ctConfigOptions = {};
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
-    projectConfig.targets['component-test'].options = {
-        ...projectConfig.targets['component-test'].options,
-        skipServe: true,
-        devServerTarget: found.target,
-    };
-    (0, devkit_1.updateProjectConfiguration)(tree, options.project, projectConfig);
+    if (projectConfig.targets?.['component-test']?.executor ===
+        '@nx/cypress:cypress') {
+        projectConfig.targets['component-test'].options = {
+            ...projectConfig.targets['component-test'].options,
+            skipServe: true,
+            devServerTarget: found.target,
+        };
+        (0, devkit_1.updateProjectConfiguration)(tree, options.project, projectConfig);
+    }
+    else {
+        ctConfigOptions.buildTarget = found.target;
+    }
+    const cypressConfigPath = (0, config_1.getProjectCypressConfigPath)(tree, projectConfig.root);
+    const updatedCyConfig = await (0, config_1.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) {

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

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

package/src/generators/library/lib/add-project.js

@@ -2,7 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addProject = void 0;
 const devkit_1 = require("@nx/devkit");
+const add_build_target_defaults_1 = require("@nx/devkit/src/generators/add-build-target-defaults");
 function addProject(tree, libraryOptions) {
+    const executor = libraryOptions.publishable
+        ? '@nx/angular:package'
+        : '@nx/angular:ng-packagr-lite';
+    (0, add_build_target_defaults_1.addBuildTargetDefaults)(tree, executor);
     const project = {
         name: libraryOptions.name,
         root: libraryOptions.projectRoot,
@@ -13,9 +18,7 @@ function addProject(tree, libraryOptions) {
         targets: {
             build: libraryOptions.buildable || libraryOptions.publishable
                 ? {
-                    executor: libraryOptions.publishable
-                        ? '@nx/angular:package'
-                        : '@nx/angular:ng-packagr-lite',
+                    executor,
                     outputs: ['{workspaceRoot}/dist/{projectRoot}'],
                     options: {
                         project: `${libraryOptions.projectRoot}/ng-package.json`,

package/src/generators/ng-add/migrators/projects/e2e.migrator.js

@@ -242,6 +242,7 @@ class E2eMigrator extends project_migrator_1.ProjectMigrator {
             // any target would do, we replace it later with the target existing in the project being migrated
             devServerTarget: `${this.appName}:serve`,
             baseUrl: 'http://localhost:4200',
+            addPlugin: process.env.NX_ADD_PLUGINS !== 'false',
         });
         const cypressConfigFilePath = this.updateOrCreateCypressConfigFile(oldCypressConfigFilePath);
         this.updateCypressProjectConfiguration(cypressConfigFilePath);

package/src/generators/ng-add/utilities/workspace.js

@@ -150,7 +150,9 @@ function updatePackageJson(tree) {
 }
 exports.updatePackageJson = updatePackageJson;
 async function updateRootEsLintConfig(tree, existingEsLintConfig, unitTestRunner) {
-    await (0, eslint_1.lintInitGenerator)(tree, {});
+    await (0, eslint_1.lintInitGenerator)(tree, {
+        addPlugin: process.env.NX_ADD_PLUGINS !== 'false',
+    });
     if (!existingEsLintConfig) {
         // There was no eslint config in the root, so we set it up and use it as-is
         (0, setup_root_eslint_1.setupRootEsLint)(tree, { unitTestRunner });

package/src/generators/utils/add-jest.d.ts

@@ -4,5 +4,6 @@ export type AddJestOptions = {
     projectRoot: string;
     skipPackageJson: boolean;
     strict: boolean;
+    addPlugin?: boolean;
 };
 export declare function addJest(tree: Tree, options: AddJestOptions): Promise<void>;

package/src/generators/utils/add-jest.js

@@ -17,6 +17,7 @@ async function addJest(tree, options) {
         skipSerializers: false,
         skipPackageJson: options.skipPackageJson,
         skipFormat: true,
+        addPlugin: options.addPlugin,
     });
     const setupFile = (0, devkit_1.joinPathFragments)(options.projectRoot, 'src', 'test-setup.ts');
     if (options.strict && tree.exists(setupFile)) {