@nx/angular 18.3.0-beta.0 → 18.3.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "18.3.0-beta.0",
+  "version": "18.3.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- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -78,14 +78,14 @@
     "tslib": "^2.3.0",
     "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "18.3.0-beta.0",
-    "@nx/js": "18.3.0-beta.0",
-    "@nx/eslint": "18.3.0-beta.0",
-    "@nx/webpack": "18.3.0-beta.0",
-    "@nx/web": "18.3.0-beta.0",
-    "@nx/workspace": "18.3.0-beta.0",
+    "@nx/devkit": "18.3.0-beta.2",
+    "@nx/js": "18.3.0-beta.2",
+    "@nx/eslint": "18.3.0-beta.2",
+    "@nx/webpack": "18.3.0-beta.2",
+    "@nx/web": "18.3.0-beta.2",
+    "@nx/workspace": "18.3.0-beta.2",
     "piscina": "^4.4.0",
-    "@nrwl/angular": "18.3.0-beta.0"
+    "@nrwl/angular": "18.3.0-beta.2"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 15.0.0 < 18.0.0",

package/plugins/component-testing.js

@@ -26,7 +26,7 @@ const semver_1 = require("semver");
  * @param options override options
  */
 function nxComponentTestingPreset(pathToConfig, options) {
-    if (global.NX_GRAPH_CREATION || global.NX_CYPRESS_INIT_GENERATOR_RUNNING) {
+    if (global.NX_GRAPH_CREATION) {
         // 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, {

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

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

package/src/generators/application/application.js

@@ -29,7 +29,9 @@ async function applicationGeneratorInternal(tree, schema) {
         ...options,
         skipFormat: true,
     });
-    (0, ensure_angular_dependencies_1.ensureAngularDependencies)(tree);
+    if (!options.skipPackageJson) {
+        (0, ensure_angular_dependencies_1.ensureAngularDependencies)(tree);
+    }
     (0, lib_1.createProject)(tree, options);
     await (0, lib_1.createFiles)(tree, options, rootOffset);
     if (options.addTailwind) {
@@ -62,6 +64,7 @@ async function applicationGeneratorInternal(tree, schema) {
         await (0, setup_ssr_1.setupSsr)(tree, {
             project: options.name,
             standalone: options.standalone,
+            skipPackageJson: options.skipPackageJson,
         });
     }
     if (!options.skipFormat) {

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

@@ -59,7 +59,9 @@ async function addE2e(tree, options) {
 }
 exports.addE2e = addE2e;
 function addFileServerTarget(tree, options, targetName) {
-    (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/web': versions_1.nxVersion });
+    if (!options.skipPackageJson) {
+        (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/web': versions_1.nxVersion });
+    }
     const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
     const isUsingApplicationBuilder = angularMajorVersion >= 17 && options.bundler === 'esbuild';
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.name);

package/src/generators/host/lib/update-ssr-setup.js

@@ -29,12 +29,14 @@ async function updateSsrSetup(tree, options, appName, typescriptConfiguration) {
     project.targets['serve-ssr'].executor =
         '@nx/angular:module-federation-dev-ssr';
     (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
-    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
-        cors: versions_1.corsVersion,
-        '@module-federation/node': versions_1.moduleFederationNodeVersion,
-    }, {
-        '@types/cors': versions_1.typesCorsVersion,
-    });
-    return installTask;
+    if (!options.skipPackageJson) {
+        return (0, devkit_1.addDependenciesToPackageJson)(tree, {
+            cors: versions_1.corsVersion,
+            '@module-federation/node': versions_1.moduleFederationNodeVersion,
+        }, {
+            '@types/cors': versions_1.typesCorsVersion,
+        });
+    }
+    return () => { };
 }
 exports.updateSsrSetup = updateSsrSetup;

package/src/generators/library/library.js

@@ -50,7 +50,9 @@ async function libraryGeneratorInternal(tree, schema) {
         skipFormat: true,
     });
     await (0, init_1.default)(tree, { ...libraryOptions, skipFormat: true });
-    (0, ensure_angular_dependencies_1.ensureAngularDependencies)(tree);
+    if (!libraryOptions.skipPackageJson) {
+        (0, ensure_angular_dependencies_1.ensureAngularDependencies)(tree);
+    }
     const project = (0, add_project_1.addProject)(tree, libraryOptions);
     (0, create_files_1.createFiles)(tree, options, project);
     (0, update_tsconfig_1.updateTsConfig)(tree, libraryOptions);
@@ -72,10 +74,11 @@ async function libraryGeneratorInternal(tree, schema) {
             skipPackageJson: libraryOptions.skipPackageJson,
         });
     }
-    if (libraryOptions.buildable || libraryOptions.publishable) {
-        (0, version_utils_1.addDependenciesToPackageJsonIfDontExist)(tree, {}, {
+    if ((libraryOptions.buildable || libraryOptions.publishable) &&
+        !libraryOptions.skipPackageJson) {
+        (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
             'ng-packagr': pkgVersions.ngPackagrVersion,
-        });
+        }, undefined, true);
         (0, dependencies_1.addBuildableLibrariesPostCssDependencies)(tree);
     }
     (0, js_1.addTsConfigPath)(tree, libraryOptions.importPath, [

package/src/generators/remote/lib/update-ssr-setup.d.ts

@@ -1,7 +1,8 @@
 import type { Tree } from '@nx/devkit';
-export declare function updateSsrSetup(tree: Tree, { appName, port, standalone, typescriptConfiguration, }: {
+export declare function updateSsrSetup(tree: Tree, { appName, port, standalone, typescriptConfiguration, skipPackageJson, }: {
     appName: string;
     port: number;
     standalone: boolean;
     typescriptConfiguration: boolean;
+    skipPackageJson?: boolean;
 }): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/remote/lib/update-ssr-setup.js

@@ -5,7 +5,7 @@ const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
 const versions_1 = require("../../../utils/versions");
 const version_utils_1 = require("../../utils/version-utils");
-async function updateSsrSetup(tree, { appName, port, standalone, typescriptConfiguration, }) {
+async function updateSsrSetup(tree, { appName, port, standalone, typescriptConfiguration, skipPackageJson, }) {
     let project = (0, devkit_1.readProjectConfiguration)(tree, appName);
     tree.rename((0, devkit_1.joinPathFragments)(project.sourceRoot, 'main.server.ts'), (0, devkit_1.joinPathFragments)(project.sourceRoot, 'bootstrap.server.ts'));
     tree.write((0, devkit_1.joinPathFragments)(project.root, 'server.ts'), "import('./src/main.server');");
@@ -48,12 +48,14 @@ async function updateSsrSetup(tree, { appName, port, standalone, typescriptConfi
         },
     };
     (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
-    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
-        cors: versions_1.corsVersion,
-        '@module-federation/node': versions_1.moduleFederationNodeVersion,
-    }, {
-        '@types/cors': versions_1.typesCorsVersion,
-    });
-    return installTask;
+    if (!skipPackageJson) {
+        return (0, devkit_1.addDependenciesToPackageJson)(tree, {
+            cors: versions_1.corsVersion,
+            '@module-federation/node': versions_1.moduleFederationNodeVersion,
+        }, {
+            '@types/cors': versions_1.typesCorsVersion,
+        });
+    }
+    return () => { };
 }
 exports.updateSsrSetup = updateSsrSetup;

package/src/generators/remote/remote.js

@@ -56,16 +56,20 @@ async function remoteInternal(tree, schema) {
         typescriptConfiguration,
         setParserOptionsProject: options.setParserOptionsProject,
     });
-    const installSwcHelpersTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
-        '@swc/helpers': versions_1.swcHelpersVersion,
-    });
-    let installTasks = [appInstallTask, installSwcHelpersTask];
+    const installTasks = [appInstallTask];
+    if (!options.skipPackageJson) {
+        const installSwcHelpersTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+            '@swc/helpers': versions_1.swcHelpersVersion,
+        });
+        installTasks.push(installSwcHelpersTask);
+    }
     if (options.ssr) {
         let ssrInstallTask = await (0, lib_1.updateSsrSetup)(tree, {
             appName: remoteProjectName,
             port,
             typescriptConfiguration,
             standalone: options.standalone,
+            skipPackageJson: options.skipPackageJson,
         });
         installTasks.push(ssrInstallTask);
     }

package/src/generators/setup-mf/files/ts-webpack/module-federation.config.ts__tmpl__

@@ -14,7 +14,7 @@ const config: ModuleFederationConfig = {
    * declare module 'my-external-remote';
    *
    */
-  remotes: [<% remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); %>]<% } %><% if(type === 'remote') { %>
+  remotes: [<% if (federationType === 'static') { remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); } %>]<% } %><% if(type === 'remote') { %>
   exposes: {<% if(standalone) { %>
     './Routes': '<%= projectRoot %>/src/app/remote-entry/entry.routes.ts',<% } else { %>
     './Module': '<%= projectRoot %>/src/app/remote-entry/entry.module.ts',<% } %>

package/src/generators/setup-mf/files/webpack/module-federation.config.js__tmpl__

@@ -12,7 +12,7 @@ module.exports = {
    * declare module 'my-external-remote';
    *
    */
-  remotes: [<% remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); %>]<% } %><% if(type === 'remote') { %>
+  remotes: [<% if (federationType === 'static') { remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); } %>]<% } %><% if(type === 'remote') { %>
   exposes: {<% if(standalone) { %>
     './Routes': '<%= projectRoot %>/src/app/remote-entry/entry.routes.ts',<% } else { %>
     './Module': '<%= projectRoot %>/src/app/remote-entry/entry.module.ts',<% } %>

package/src/generators/setup-mf/lib/add-remote-to-host.d.ts

@@ -1,4 +1,9 @@
 import { Tree } from '@nx/devkit';
-import type { Schema } from '../schema';
+export type AddRemoteOptions = {
+    host: string;
+    appName: string;
+    standalone: boolean;
+    port: number;
+};
 export declare function checkIsCommaNeeded(mfRemoteText: string): boolean;
-export declare function addRemoteToHost(tree: Tree, options: Schema): void;
+export declare function addRemoteToHost(tree: Tree, options: AddRemoteOptions): void;

package/src/generators/setup-mf/lib/add-remote-to-host.js

@@ -27,19 +27,6 @@ function addRemoteToHost(tree, options) {
         else if (hostFederationType === 'dynamic') {
             addRemoteToDynamicHost(tree, options, pathToMFManifest);
         }
-        // const declarationFilePath = joinPathFragments(
-        //   hostProject.sourceRoot,
-        //   'remotes.d.ts'
-        // );
-        //
-        // const declarationFileContent =
-        //   (tree.exists(declarationFilePath)
-        //     ? tree.read(declarationFilePath, 'utf-8')
-        //     : '') +
-        //   `\ndeclare module '${options.appName}/${
-        //     options.standalone ? `Routes` : `Module`
-        //   }';`;
-        // tree.write(declarationFilePath, declarationFileContent);
         addLazyLoadedRouteToHostAppModule(tree, options, hostFederationType);
     }
 }
@@ -47,8 +34,8 @@ exports.addRemoteToHost = addRemoteToHost;
 function determineHostFederationType(tree, pathToMfManifest) {
     return tree.exists(pathToMfManifest) ? 'dynamic' : 'static';
 }
-function addRemoteToStaticHost(tree, options, hostProject, isHostUsingTypescrpt) {
-    const hostMFConfigPath = (0, devkit_1.joinPathFragments)(hostProject.root, isHostUsingTypescrpt
+function addRemoteToStaticHost(tree, options, hostProject, isHostUsingTypescript) {
+    const hostMFConfigPath = (0, devkit_1.joinPathFragments)(hostProject.root, isHostUsingTypescript
         ? 'module-federation.config.ts'
         : 'module-federation.config.js');
     if (!hostMFConfigPath || !tree.exists(hostMFConfigPath)) {

package/src/generators/setup-mf/lib/generate-config.js

@@ -18,6 +18,7 @@ function generateWebpackConfig(tree, options, appRoot, remotesWithPorts) {
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToWebpackTemplateFiles}`), appRoot, {
         tmpl: '',
         type: options.mfType,
+        federationType: options.federationType,
         name: options.appName,
         remotes: remotesWithPorts ?? [],
         projectRoot: appRoot,

package/src/generators/setup-mf/lib/update-host-app-routes.js

@@ -11,11 +11,8 @@ function updateHostAppRoutes(tree, options) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
     const { sourceRoot } = (0, project_configuration_1.readProjectConfiguration)(tree, options.appName);
-    const remoteRoutes = options.remotes && Array.isArray(options.remotes)
-        ? options.remotes.reduce((routes, remote) => `${routes}\n<li><a routerLink='${remote}'>${(0, devkit_1.names)(remote).className}</a></li>`, '')
-        : '';
     tree.write((0, devkit_1.joinPathFragments)(sourceRoot, 'app/app.component.html'), `<ul class="remote-menu">
-<li><a routerLink="/">Home</a></li>${remoteRoutes}
+<li><a routerLink="/">Home</a></li>
 </ul>
 <router-outlet></router-outlet>
 `);

package/src/generators/setup-mf/setup-mf.js

@@ -9,11 +9,18 @@ async function setupMf(tree, rawOptions) {
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.appName);
     let installTask = () => { };
     if (options.mfType === 'remote') {
-        (0, lib_1.addRemoteToHost)(tree, options);
+        (0, lib_1.addRemoteToHost)(tree, {
+            appName: options.appName,
+            host: options.host,
+            standalone: options.standalone,
+            port: options.port,
+        });
         (0, lib_1.addRemoteEntry)(tree, options, projectConfig.root);
         (0, lib_1.removeDeadCodeFromRemote)(tree, options);
         (0, lib_1.setupTspathForRemote)(tree, options);
-        installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/web': versions_1.nxVersion, '@nx/webpack': versions_1.nxVersion });
+        if (!options.skipPackageJson) {
+            installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/web': versions_1.nxVersion, '@nx/webpack': versions_1.nxVersion });
+        }
     }
     const remotesWithPorts = (0, lib_1.getRemotesWithPorts)(tree, options);
     (0, lib_1.generateWebpackConfig)(tree, options, projectConfig.root, remotesWithPorts);
@@ -24,7 +31,17 @@ async function setupMf(tree, rawOptions) {
     if (options.mfType === 'host') {
         (0, lib_1.setupHostIfDynamic)(tree, options);
         (0, lib_1.updateHostAppRoutes)(tree, options);
-        installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/webpack': versions_1.nxVersion });
+        for (const { remoteName, port } of remotesWithPorts) {
+            (0, lib_1.addRemoteToHost)(tree, {
+                appName: remoteName,
+                host: options.appName,
+                standalone: options.standalone,
+                port,
+            });
+        }
+        if (!options.skipPackageJson) {
+            installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/webpack': versions_1.nxVersion });
+        }
     }
     if (!options.skipE2E) {
         (0, lib_1.addCypressOnErrorWorkaround)(tree, options);

package/src/generators/setup-ssr/schema.d.ts

@@ -9,4 +9,5 @@ export interface Schema {
   standalone?: boolean;
   hydration?: boolean;
   skipFormat?: boolean;
+  skipPackageJson?: boolean;
 }

package/src/generators/setup-ssr/schema.json

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

package/src/generators/setup-ssr/setup-ssr.js

@@ -10,7 +10,9 @@ async function setupSsr(tree, schema) {
     const { targets } = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const isUsingApplicationBuilder = targets.build.executor === '@angular-devkit/build-angular:application' ||
         targets.build.executor === '@nx/angular:application';
-    (0, lib_1.addDependencies)(tree, isUsingApplicationBuilder);
+    if (!schema.skipPackageJson) {
+        (0, lib_1.addDependencies)(tree, isUsingApplicationBuilder);
+    }
     (0, lib_1.generateSSRFiles)(tree, options, isUsingApplicationBuilder);
     if (!options.standalone) {
         (0, lib_1.updateAppModule)(tree, options);

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

@@ -3,11 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addJest = void 0;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
-const version_utils_1 = require("./version-utils");
 async function addJest(tree, options) {
     if (!options.skipPackageJson) {
         process.env.npm_config_legacy_peer_deps ??= 'true';
-        (0, version_utils_1.addDependenciesToPackageJsonIfDontExist)(tree, {}, { 'jest-preset-angular': versions_1.jestPresetAngularVersion });
+        (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { 'jest-preset-angular': versions_1.jestPresetAngularVersion }, undefined, true);
     }
     const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
     await configurationGenerator(tree, {

package/src/generators/utils/ensure-angular-dependencies.d.ts

@@ -1,2 +1,2 @@
-import type { GeneratorCallback, Tree } from '@nx/devkit';
+import { type GeneratorCallback, type Tree } from '@nx/devkit';
 export declare function ensureAngularDependencies(tree: Tree): GeneratorCallback;

package/src/generators/utils/ensure-angular-dependencies.js

@@ -1,35 +1,52 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ensureAngularDependencies = void 0;
+const devkit_1 = require("@nx/devkit");
 const version_utils_1 = require("./version-utils");
 function ensureAngularDependencies(tree) {
+    const dependencies = {};
+    const devDependencies = {};
     const pkgVersions = (0, version_utils_1.versions)(tree);
-    const angularVersion = (0, version_utils_1.getInstalledPackageVersion)(tree, '@angular/core') ??
-        pkgVersions.angularVersion;
-    const angularDevkitVersion = (0, version_utils_1.getInstalledPackageVersion)(tree, '@angular-devkit/build-angular') ??
-        pkgVersions.angularDevkitVersion;
-    const rxjsVersion = (0, version_utils_1.getInstalledPackageVersion)(tree, 'rxjs') ?? pkgVersions.rxjsVersion;
-    const tsLibVersion = (0, version_utils_1.getInstalledPackageVersion)(tree, 'tslib') ?? pkgVersions.tsLibVersion;
-    const zoneJsVersion = (0, version_utils_1.getInstalledPackageVersion)(tree, 'zone.js') ?? pkgVersions.zoneJsVersion;
-    return (0, version_utils_1.addDependenciesToPackageJsonIfDontExist)(tree, {
-        '@angular/animations': angularVersion,
-        '@angular/common': angularVersion,
-        '@angular/compiler': angularVersion,
-        '@angular/core': angularVersion,
-        '@angular/forms': angularVersion,
-        '@angular/platform-browser': angularVersion,
-        '@angular/platform-browser-dynamic': angularVersion,
-        '@angular/router': angularVersion,
-        rxjs: rxjsVersion,
-        tslib: tsLibVersion,
-        'zone.js': zoneJsVersion,
-    }, {
-        '@angular/cli': angularDevkitVersion,
-        '@angular/compiler-cli': angularVersion,
-        '@angular/language-service': angularVersion,
-        '@angular-devkit/build-angular': angularDevkitVersion,
-        '@angular-devkit/schematics': angularDevkitVersion,
-        '@schematics/angular': angularDevkitVersion,
-    });
+    const installedAngularCoreVersion = (0, version_utils_1.getInstalledPackageVersion)(tree, '@angular/core');
+    if (!installedAngularCoreVersion) {
+        /**
+         * If @angular/core is already installed, we assume the workspace was already
+         * initialized with Angular dependencies and we don't want to re-install them.
+         * This is to avoid re-installing Angular runtime dependencies that the user
+         * might have removed.
+         */
+        const angularVersion = pkgVersions.angularVersion;
+        const rxjsVersion = (0, version_utils_1.getInstalledPackageVersion)(tree, 'rxjs') ?? pkgVersions.rxjsVersion;
+        const tsLibVersion = (0, version_utils_1.getInstalledPackageVersion)(tree, 'tslib') ?? pkgVersions.tsLibVersion;
+        const zoneJsVersion = (0, version_utils_1.getInstalledPackageVersion)(tree, 'zone.js') ?? pkgVersions.zoneJsVersion;
+        dependencies['@angular/animations'] = angularVersion;
+        dependencies['@angular/common'] = angularVersion;
+        dependencies['@angular/compiler'] = angularVersion;
+        dependencies['@angular/core'] = angularVersion;
+        dependencies['@angular/forms'] = angularVersion;
+        dependencies['@angular/platform-browser'] = angularVersion;
+        dependencies['@angular/platform-browser-dynamic'] = angularVersion;
+        dependencies['@angular/router'] = angularVersion;
+        dependencies.rxjs = rxjsVersion;
+        dependencies.tslib = tsLibVersion;
+        dependencies['zone.js'] = zoneJsVersion;
+    }
+    const installedAngularDevkitVersion = (0, version_utils_1.getInstalledPackageVersion)(tree, '@angular-devkit/build-angular');
+    if (!installedAngularDevkitVersion) {
+        /**
+         * If `@angular-devkit/build-angular` is already installed, we assume the workspace
+         * was already initialized with Angular and we don't want to re-install the tooling.
+         * This is to avoid re-installing Angular tooling that the user might have removed.
+         */
+        devDependencies['@angular/cli'] = pkgVersions.angularDevkitVersion;
+        devDependencies['@angular/compiler-cli'] = pkgVersions.angularVersion;
+        devDependencies['@angular/language-service'] = pkgVersions.angularVersion;
+    }
+    // Ensure the `@nx/angular` peer dependencies are always installed.
+    const angularDevkitVersion = installedAngularDevkitVersion ?? pkgVersions.angularDevkitVersion;
+    devDependencies['@angular-devkit/build-angular'] = angularDevkitVersion;
+    devDependencies['@angular-devkit/schematics'] = angularDevkitVersion;
+    devDependencies['@schematics/angular'] = angularDevkitVersion;
+    return (0, devkit_1.addDependenciesToPackageJson)(tree, dependencies, devDependencies, undefined, true);
 }
 exports.ensureAngularDependencies = ensureAngularDependencies;

package/src/generators/utils/testing.js

@@ -5,14 +5,12 @@ const devkit_1 = require("@nx/devkit");
 const testing_1 = require("@nx/devkit/testing");
 const eslint_1 = require("@nx/eslint");
 const test_runners_1 = require("../../utils/test-runners");
-const versions_1 = require("../../utils/versions");
 const application_1 = require("../application/application");
 const component_1 = require("../component/component");
 const host_1 = require("../host/host");
 const library_1 = require("../library/library");
 const remote_1 = require("../remote/remote");
 async function generateTestApplication(tree, options) {
-    addAngularPluginPeerDeps(tree);
     tree.write('.gitignore', '');
     await (0, application_1.applicationGenerator)(tree, {
         projectNameAndRootFormat: 'as-provided',
@@ -21,19 +19,16 @@ async function generateTestApplication(tree, options) {
 }
 exports.generateTestApplication = generateTestApplication;
 async function generateTestHostApplication(tree, options) {
-    addAngularPluginPeerDeps(tree);
     tree.write('.gitignore', '');
     await (0, host_1.host)(tree, { projectNameAndRootFormat: 'as-provided', ...options });
 }
 exports.generateTestHostApplication = generateTestHostApplication;
 async function generateTestRemoteApplication(tree, options) {
-    addAngularPluginPeerDeps(tree);
     tree.write('.gitignore', '');
     await (0, remote_1.remote)(tree, { projectNameAndRootFormat: 'as-provided', ...options });
 }
 exports.generateTestRemoteApplication = generateTestRemoteApplication;
 async function generateTestLibrary(tree, options) {
-    addAngularPluginPeerDeps(tree);
     tree.write('.gitignore', '');
     await (0, library_1.libraryGenerator)(tree, {
         projectNameAndRootFormat: 'as-provided',
@@ -43,7 +38,6 @@ async function generateTestLibrary(tree, options) {
 exports.generateTestLibrary = generateTestLibrary;
 async function createStorybookTestWorkspaceForLib(libName) {
     let tree = (0, testing_1.createTreeWithEmptyWorkspace)({ layout: 'apps-libs' });
-    addAngularPluginPeerDeps(tree);
     tree.write('.gitignore', '');
     await (0, library_1.libraryGenerator)(tree, {
         name: libName,
@@ -243,17 +237,6 @@ export class StaticMemberDeclarationsModule {
     return tree;
 }
 exports.createStorybookTestWorkspaceForLib = createStorybookTestWorkspaceForLib;
-function addAngularPluginPeerDeps(tree) {
-    (0, devkit_1.updateJson)(tree, 'package.json', (json) => ({
-        ...json,
-        devDependencies: {
-            ...json.devDependencies,
-            '@angular-devkit/core': versions_1.angularDevkitVersion,
-            '@angular-devkit/schematics': versions_1.angularDevkitVersion,
-            '@schematics/angular': versions_1.angularDevkitVersion,
-        },
-    }));
-}
 function generateModule(tree, options) {
     const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     if (options.path === undefined) {

package/src/generators/utils/version-utils.d.ts

@@ -1,4 +1,4 @@
-import type { GeneratorCallback, Tree } from '@nx/devkit';
+import { type Tree } from '@nx/devkit';
 import { type PackageCompatVersions, type PackageLatestVersions } from '../../utils/backward-compatible-versions';
 export declare function getInstalledAngularVersion(tree: Tree): string;
 export declare function getInstalledAngularMajorVersion(tree: Tree): number;
@@ -11,5 +11,4 @@ export declare function getInstalledPackageVersionInfo(tree: Tree, pkgName: stri
     major: number;
     version: string;
 };
-export declare function addDependenciesToPackageJsonIfDontExist(tree: Tree, dependencies: Record<string, string>, devDependencies: Record<string, string>, packageJsonPath?: string): GeneratorCallback;
 export declare function versions(tree: Tree): PackageLatestVersions | PackageCompatVersions;

package/src/generators/utils/version-utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.versions = exports.addDependenciesToPackageJsonIfDontExist = exports.getInstalledPackageVersionInfo = exports.getInstalledPackageVersion = exports.getInstalledAngularVersionInfo = exports.getInstalledAngularMajorVersion = exports.getInstalledAngularVersion = void 0;
+exports.versions = exports.getInstalledPackageVersionInfo = exports.getInstalledPackageVersion = exports.getInstalledAngularVersionInfo = exports.getInstalledAngularMajorVersion = exports.getInstalledAngularVersion = void 0;
 const devkit_1 = require("@nx/devkit");
 const semver_1 = require("semver");
 const backward_compatible_versions_1 = require("../../utils/backward-compatible-versions");
@@ -40,18 +40,6 @@ function getInstalledPackageVersionInfo(tree, pkgName) {
     return version ? { major: (0, semver_1.major)((0, semver_1.coerce)(version)), version } : null;
 }
 exports.getInstalledPackageVersionInfo = getInstalledPackageVersionInfo;
-function addDependenciesToPackageJsonIfDontExist(tree, dependencies, devDependencies, packageJsonPath = 'package.json') {
-    const packageJson = (0, devkit_1.readJson)(tree, packageJsonPath);
-    function filterExisting(deps) {
-        return Object.keys(deps)
-            .filter((d) => !packageJson.dependencies?.[d] && !packageJson.devDependencies?.[d])
-            .reduce((acc, d) => ({ ...acc, [d]: deps[d] }), {});
-    }
-    const depsToAdd = filterExisting(dependencies);
-    const devDepsToAdd = filterExisting(devDependencies);
-    return (0, devkit_1.addDependenciesToPackageJson)(tree, depsToAdd, devDepsToAdd, packageJsonPath);
-}
-exports.addDependenciesToPackageJsonIfDontExist = addDependenciesToPackageJsonIfDontExist;
 function versions(tree) {
     const majorAngularVersion = getInstalledAngularMajorVersion(tree);
     switch (majorAngularVersion) {

package/src/migrations/update-15-2-0/remove-browserlist-config.d.ts

@@ -1,3 +1,4 @@
+import 'nx/src/internal-testing-utils/mock-project-graph';
 import type { Tree } from '@nx/devkit';
 export declare const DEFAULT_BROWSERS: string[];
 export default function removeBrowserlistConfig(tree: Tree): Promise<void>;

package/src/migrations/update-15-2-0/remove-browserlist-config.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_BROWSERS = void 0;
+require("nx/src/internal-testing-utils/mock-project-graph");
 const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
 const validBrowserslistConfigFilenames = new Set([