feat(angular): remove optional @nx/cypress and @nx/jest from dependen…

…cies

packages/angular/package.json

@@ -58,8 +58,6 @@
     "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
     "@nx/devkit": "file:../devkit",
-    "@nx/cypress": "file:../cypress",
-    "@nx/jest": "file:../jest",
     "@nx/js": "file:../js",
     "@nx/eslint": "file:../eslint",
     "@nx/webpack": "file:../webpack",
@@ -69,11 +67,11 @@
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 15.0.0 < 18.0.0",
+    "@angular-devkit/core": ">= 15.0.0 < 18.0.0",
     "@angular-devkit/schematics": ">= 15.0.0 < 18.0.0",
     "@schematics/angular": ">= 15.0.0 < 18.0.0",
-    "@angular-devkit/core": ">= 15.0.0 < 18.0.0",
-    "rxjs": "^6.5.3 || ^7.5.0",
-    "esbuild": "^0.19.2"
+    "esbuild": "^0.19.2",
+    "rxjs": "^6.5.3 || ^7.5.0"
   },
   "peerDependenciesMeta": {
     "esbuild": {

packages/angular/src/generators/application/lib/add-e2e.ts

@@ -1,14 +1,13 @@
-import { configurationGenerator } from '@nx/cypress';
 import type { Tree } from '@nx/devkit';
 import {
   addDependenciesToPackageJson,
   addProjectConfiguration,
   ensurePackage,
   getPackageManagerCommand,
   joinPathFragments,
+  readNxJson,
   readProjectConfiguration,
   updateProjectConfiguration,
-  readNxJson,
 } from '@nx/devkit';
 import { nxVersion } from '../../../utils/versions';
 import { getInstalledAngularVersionInfo } from '../../utils/version-utils';
@@ -22,6 +21,9 @@ export async function addE2e(tree: Tree, options: NormalizedSchema) {
     nxJson.useInferencePlugins !== false;
 
   if (options.e2eTestRunner === 'cypress') {
+    const { configurationGenerator } = ensurePackage<
+      typeof import('@nx/cypress')
+    >('@nx/cypress', nxVersion);
     // TODO: This can call `@nx/web:static-config` generator when ready
     addFileServerTarget(tree, options, 'serve-static');
     addProjectConfiguration(tree, options.e2eProjectName, {
@@ -44,19 +46,17 @@ export async function addE2e(tree: Tree, options: NormalizedSchema) {
       addPlugin,
     });
   } else if (options.e2eTestRunner === 'playwright') {
-    const { configurationGenerator: playwrightConfigurationGenerator } =
-      ensurePackage<typeof import('@nx/playwright')>(
-        '@nx/playwright',
-        nxVersion
-      );
+    const { configurationGenerator } = ensurePackage<
+      typeof import('@nx/playwright')
+    >('@nx/playwright', nxVersion);
     addProjectConfiguration(tree, options.e2eProjectName, {
       projectType: 'application',
       root: options.e2eProjectRoot,
       sourceRoot: joinPathFragments(options.e2eProjectRoot, 'src'),
       targets: {},
       implicitDependencies: [options.name],
     });
-    await playwrightConfigurationGenerator(tree, {
+    await configurationGenerator(tree, {
       project: options.e2eProjectName,
       skipFormat: true,
       skipPackageJson: options.skipPackageJson,

packages/angular/src/generators/component-test/component-test.ts

@@ -1,11 +1,12 @@
-import { assertMinimumCypressVersion } from '@nx/cypress/src/utils/cypress-version';
 import {
+  ensurePackage,
   formatFiles,
   generateFiles,
   joinPathFragments,
   readProjectConfiguration,
   Tree,
 } from '@nx/devkit';
+import { nxVersion } from '../../utils/versions';
 import {
   getArgsDefaultValue,
   getComponentProps,
@@ -16,6 +17,10 @@ export async function componentTestGenerator(
   tree: Tree,
   options: ComponentTestSchema
 ) {
+  ensurePackage('@nx/cypress', nxVersion);
+  const { assertMinimumCypressVersion } = await import(
+    '@nx/cypress/src/utils/cypress-version'
+  );
   assertMinimumCypressVersion(10);
   const { root } = readProjectConfiguration(tree, options.project);
   const componentDirPath = joinPathFragments(root, options.componentDir);

packages/angular/src/generators/cypress-component-configuration/cypress-component-configuration.ts

@@ -1,15 +1,7 @@
-import { componentConfigurationGenerator as baseCyCTConfig } from '@nx/cypress';
-import { NxComponentTestingOptions } from '@nx/cypress/plugins/cypress-preset';
-import {
-  addDefaultCTConfig,
-  addMountDefinition,
-  getProjectCypressConfigPath,
-} from '@nx/cypress/src/utils/config';
-import {
-  findBuildConfig,
-  FoundTarget,
-} from '@nx/cypress/src/utils/find-target-options';
+import type { NxComponentTestingOptions } from '@nx/cypress/plugins/cypress-preset';
+import type { FoundTarget } from '@nx/cypress/src/utils/find-target-options';
 import {
+  ensurePackage,
   formatFiles,
   joinPathFragments,
   ProjectConfiguration,
@@ -18,6 +10,7 @@ import {
   updateProjectConfiguration,
 } from '@nx/devkit';
 import { relative } from 'path';
+import { nxVersion } from '../../utils/versions';
 import { componentTestGenerator } from '../component-test/component-test';
 import {
   getComponentsInfo,
@@ -46,6 +39,9 @@ export async function cypressComponentConfigurationInternal(
   options: CypressComponentConfigSchema
 ) {
   const projectConfig = readProjectConfiguration(tree, options.project);
+  const { componentConfigurationGenerator: baseCyCTConfig } = ensurePackage<
+    typeof import('@nx/cypress')
+  >('@nx/cypress', nxVersion);
   const installTask = await baseCyCTConfig(tree, {
     project: options.project,
     skipFormat: true,
@@ -78,6 +74,7 @@ async function addFiles(
     'support',
     'component.ts'
   );
+  const { addMountDefinition } = await import('@nx/cypress/src/utils/config');
   const updatedCmpContents = await addMountDefinition(
     tree.read(componentFile, 'utf-8')
   );
@@ -129,6 +126,9 @@ async function configureCypressCT(
   let found: FoundTarget = { target: options.buildTarget, config: undefined };
 
   if (!options.buildTarget) {
+    const { findBuildConfig } = await import(
+      '@nx/cypress/src/utils/find-target-options'
+    );
     found = await findBuildConfig(tree, {
       project: options.project,
       buildTarget: options.buildTarget,
@@ -158,6 +158,9 @@ async function configureCypressCT(
     ctConfigOptions.buildTarget = found.target;
   }
 
+  const { addDefaultCTConfig, getProjectCypressConfigPath } = await import(
+    '@nx/cypress/src/utils/config'
+  );
   const cypressConfigPath = getProjectCypressConfigPath(
     tree,
     projectConfig.root

packages/angular/src/generators/ng-add/migrators/projects/e2e.migrator.ts

@@ -1,13 +1,11 @@
-import { configurationGenerator } from '@nx/cypress';
-import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
-import { installedCypressVersion } from '@nx/cypress/src/utils/cypress-version';
 import type {
   ProjectConfiguration,
   TargetConfiguration,
   Tree,
 } from '@nx/devkit';
 import {
   addProjectConfiguration,
+  ensurePackage,
   joinPathFragments,
   offsetFromRoot,
   readJson,
@@ -21,29 +19,23 @@ import {
 } from '@nx/devkit';
 import { Linter, lintProjectGenerator } from '@nx/eslint';
 import { getRootTsConfigPathInTree, insertImport } from '@nx/js';
+import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript';
 import { basename, relative } from 'path';
 import type {
   Node,
   ObjectLiteralExpression,
   PropertyAssignment,
 } from 'typescript';
-import {
-  isObjectLiteralExpression,
-  isPropertyAssignment,
-  isStringLiteralLike,
-  isTemplateExpression,
-  SyntaxKind,
-} from 'typescript';
+import { FileChangeRecorder } from '../../../../utils/file-change-recorder';
+import { nxVersion } from '../../../../utils/versions';
 import type { GeneratorOptions } from '../../schema';
 import type {
   Logger,
   MigrationProjectConfiguration,
   Target,
   ValidationResult,
 } from '../../utilities';
-import { FileChangeRecorder } from '../../../../utils/file-change-recorder';
 import { ProjectMigrator } from './project.migrator';
-import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript';
 
 type SupportedTargets = 'e2e';
 const supportedTargets: Record<SupportedTargets, Target> = {
@@ -81,7 +73,7 @@ export class E2eMigrator extends ProjectMigrator<SupportedTargets> {
   private appName: string;
   private isProjectUsingEsLint: boolean;
   private cypressInstalledVersion: number;
-  private cypressPreset: ReturnType<typeof nxE2EPreset>;
+  private cypressPreset: Record<string, any>;
 
   constructor(
     tree: Tree,
@@ -269,6 +261,10 @@ export class E2eMigrator extends ProjectMigrator<SupportedTargets> {
         newSourceRoot,
       };
     } else if (this.isCypressE2eProject()) {
+      ensurePackage('@nx/cypress', nxVersion);
+      const {
+        installedCypressVersion,
+      } = require('@nx/cypress/src/utils/cypress-version');
       this.cypressInstalledVersion = installedCypressVersion();
       this.project = {
         ...this.project,
@@ -347,6 +343,7 @@ export class E2eMigrator extends ProjectMigrator<SupportedTargets> {
     const addPlugin =
       process.env.NX_ADD_PLUGINS !== 'false' &&
       nxJson.useInferencePlugins !== false;
+    const { configurationGenerator } = await import('@nx/cypress');
     await configurationGenerator(this.tree, {
       project: this.project.name,
       linter: this.isProjectUsingEsLint ? Linter.EsLint : Linter.None,
@@ -556,8 +553,9 @@ export class E2eMigrator extends ProjectMigrator<SupportedTargets> {
   }
 
   private updateCypress10ConfigFile(configFilePath: string): void {
-    ensureTypescript();
+    const { isPropertyAssignment } = ensureTypescript();
     const { tsquery } = require('@phenomnomnominal/tsquery');
+    const { nxE2EPreset } = require('@nx/cypress/plugins/cypress-preset');
     this.cypressPreset = nxE2EPreset(configFilePath);
 
     const fileContent = this.tree.read(configFilePath, 'utf-8');
@@ -614,6 +612,8 @@ export class E2eMigrator extends ProjectMigrator<SupportedTargets> {
       return;
     }
 
+    const { isObjectLiteralExpression, isPropertyAssignment } =
+      ensureTypescript();
     if (!isObjectLiteralExpression(componentNode.initializer)) {
       this.logger.warn(
         'The automatic migration only supports having an object literal in the "component" option of the Cypress configuration. ' +
@@ -656,6 +656,8 @@ export class E2eMigrator extends ProjectMigrator<SupportedTargets> {
       },`;
       recorder.insertRight(defineConfigNode.getStart() + 1, e2eAssignment);
     } else {
+      const { isObjectLiteralExpression, isPropertyAssignment } =
+        ensureTypescript();
       if (!isObjectLiteralExpression(e2eNode.initializer)) {
         this.logger.warn(
           'The automatic migration only supports having an object literal in the "e2e" option of the Cypress configuration. ' +
@@ -810,6 +812,12 @@ export class E2eMigrator extends ProjectMigrator<SupportedTargets> {
     node: Node,
     properties: string[]
   ): boolean {
+    const {
+      isPropertyAssignment,
+      isStringLiteralLike,
+      isTemplateExpression,
+      SyntaxKind,
+    } = ensureTypescript();
     if (!isPropertyAssignment(node)) {
       // TODO(leo): handle more scenarios (spread assignments, etc)
       return false;

packages/angular/src/generators/setup-mf/lib/add-cypress-workaround.ts

@@ -2,7 +2,6 @@
 // as Angular attempt to figure out how to fix HMR when styles.js
 // is attached to the index.html with type=module
 
-import { CYPRESS_CONFIG_FILE_NAME_PATTERN } from '@nx/cypress/src/utils/config';
 import type { ProjectConfiguration, Tree } from '@nx/devkit';
 import {
   glob,
@@ -32,13 +31,23 @@ export function addCypressOnErrorWorkaround(tree: Tree, schema: Schema) {
     return;
   }
 
-  if (
-    e2eProject.targets?.e2e?.executor !== '@nx/cypress:cypress' &&
-    !glob(tree, [`${e2eProject.root}/${CYPRESS_CONFIG_FILE_NAME_PATTERN}`])
-      .length
-  ) {
-    // Not a cypress e2e project, skip
-    return;
+  if (e2eProject.targets?.e2e?.executor !== '@nx/cypress:cypress') {
+    try {
+      // don't ensure package is installed, if it's not installed, we don't need to add the workaround
+      const {
+        CYPRESS_CONFIG_FILE_NAME_PATTERN,
+      } = require('@nx/cypress/src/utils/config');
+      if (
+        !glob(tree, [`${e2eProject.root}/${CYPRESS_CONFIG_FILE_NAME_PATTERN}`])
+          .length
+      ) {
+        // Not a cypress e2e project, skip
+        return;
+      }
+    } catch {
+      // assume cypress is not installed
+      return;
+    }
   }
 
   const commandToAdd = `Cypress.on('uncaught:exception', err => {

packages/angular/src/generators/storybook-configuration/lib/generate-stories.ts

@@ -1,6 +1,6 @@
-import { getE2eProjectName } from '@nx/cypress/src/utils/project-name';
 import type { Tree } from '@nx/devkit';
-import { readProjectConfiguration } from '@nx/devkit';
+import { ensurePackage, readProjectConfiguration } from '@nx/devkit';
+import { nxVersion } from '../../../utils/versions';
 import { angularStoriesGenerator } from '../../stories/stories';
 import type { StorybookConfigurationOptions } from '../schema';
 
@@ -9,6 +9,10 @@ export async function generateStories(
   options: StorybookConfigurationOptions
 ) {
   const project = readProjectConfiguration(tree, options.project);
+  ensurePackage('@nx/cypress', nxVersion);
+  const { getE2eProjectName } = await import(
+    '@nx/cypress/src/utils/project-name'
+  );
   const e2eProjectName = getE2eProjectName(
     options.project,
     project.root,

packages/angular/src/generators/utils/add-jest.ts

@@ -1,6 +1,5 @@
-import { joinPathFragments, type Tree } from '@nx/devkit';
-import { configurationGenerator } from '@nx/jest';
-import { jestPresetAngularVersion } from '../../utils/versions';
+import { ensurePackage, joinPathFragments, type Tree } from '@nx/devkit';
+import { jestPresetAngularVersion, nxVersion } from '../../utils/versions';
 import { addDependenciesToPackageJsonIfDontExist } from './version-utils';
 
 export type AddJestOptions = {
@@ -24,6 +23,10 @@ export async function addJest(
     );
   }
 
+  const { configurationGenerator } = ensurePackage<typeof import('@nx/jest')>(
+    '@nx/jest',
+    nxVersion
+  );
   await configurationGenerator(tree, {
     project: options.name,
     setupFile: 'angular',