feat(angular): support angular 18.0.0 (#25293)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- This is the behavior we have today -->

<!-- This is the behavior we should expect with the changes in this PR
-->

<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

e2e/angular/src/ng-add.test.ts

@@ -2,6 +2,7 @@ import {
   checkFilesDoNotExist,
   checkFilesExist,
   cleanupProject,
+  getPackageManagerCommand,
   getSelectedPackageManager,
   packageInstall,
   readJson,
@@ -197,13 +198,13 @@ describe('convert Angular CLI workspace to an Nx workspace', () => {
           budgets: [
             {
               type: 'initial',
-              maximumWarning: '500kb',
-              maximumError: '1mb',
+              maximumWarning: '500kB',
+              maximumError: '1MB',
             },
             {
               type: 'anyComponentStyle',
-              maximumWarning: '2kb',
-              maximumError: '4kb',
+              maximumWarning: '2kB',
+              maximumError: '4kB',
             },
           ],
           outputHashing: 'all',
@@ -426,8 +427,13 @@ describe('convert Angular CLI workspace to an Nx workspace', () => {
     // add other projects
     const app1 = uniq('app1');
     const lib1 = uniq('lib1');
-    runCommand(`ng g @schematics/angular:application ${app1} --no-interactive`);
-    runCommand(`ng g @schematics/angular:library ${lib1} --no-interactive`);
+    const pmc = getPackageManagerCommand();
+    runCommand(
+      `${pmc.exec} ng g @schematics/angular:application ${app1} --no-interactive`
+    );
+    runCommand(
+      `${pmc.exec} ng g @schematics/angular:library ${lib1} --no-interactive`
+    );
 
     runCLI('g @nx/angular:ng-add');
 

e2e/utils/command-utils.ts

@@ -5,6 +5,7 @@ import {
   ensureCypressInstallation,
   ensurePlaywrightBrowsersInstallation,
   getNpmMajorVersion,
+  getPnpmVersion,
   getPublishedVersion,
   getStrippedEnvironmentVariables,
   getYarnMajorVersion,
@@ -17,6 +18,7 @@ import * as isCI from 'is-ci';
 import { fileExists, readJson, updateJson } from './file-utils';
 import { logError, stripConsoleColors } from './log-utils';
 import { existsSync } from 'fs-extra';
+import { gte } from 'semver';
 
 export interface RunCmdOpts {
   silenceError?: boolean;
@@ -96,10 +98,7 @@ export function runCommand(
   }
 }
 
-export function getPackageManagerCommand({
-  path = tmpProjPath(),
-  packageManager = detectPackageManager(path),
-} = {}): {
+export type PackageManagerCommands = {
   createWorkspace: string;
   run: (script: string, args: string) => string;
   runNx: string;
@@ -111,80 +110,97 @@ export function getPackageManagerCommand({
   addDev: string;
   list: string;
   runLerna: string;
-} {
+  exec: string;
+};
+export function getPackageManagerCommand({
+  path = tmpProjPath(),
+  packageManager = detectPackageManager(path),
+} = {}): PackageManagerCommands {
   const npmMajorVersion = getNpmMajorVersion();
-  const yarnMajorVersion = getYarnMajorVersion(path);
   const publishedVersion = getPublishedVersion();
-  const isYarnWorkspace = fileExists(join(path, 'package.json'))
-    ? readJson('package.json').workspaces
-    : false;
-  const isPnpmWorkspace = existsSync(join(path, 'pnpm-workspace.yaml'));
-
-  return {
-    npm: {
-      createWorkspace: `npx ${
-        npmMajorVersion && +npmMajorVersion >= 7 ? '--yes' : ''
-      } create-nx-workspace@${publishedVersion}`,
-      run: (script: string, args: string) => `npm run ${script} -- ${args}`,
-      runNx: `npx nx`,
-      runNxSilent: `npx nx`,
-      runUninstalledPackage: `npx --yes`,
-      install: 'npm install',
-      ciInstall: 'npm ci',
-      addProd: `npm install --legacy-peer-deps`,
-      addDev: `npm install --legacy-peer-deps -D`,
-      list: 'npm ls --depth 10',
-      runLerna: `npx lerna`,
+
+  const commands: { [pm in PackageManager]: () => PackageManagerCommands } = {
+    npm: () => {
+      return {
+        createWorkspace: `npx ${
+          npmMajorVersion && +npmMajorVersion >= 7 ? '--yes' : ''
+        } create-nx-workspace@${publishedVersion}`,
+        run: (script: string, args: string) => `npm run ${script} -- ${args}`,
+        runNx: `npx nx`,
+        runNxSilent: `npx nx`,
+        runUninstalledPackage: `npx --yes`,
+        install: 'npm install',
+        ciInstall: 'npm ci',
+        addProd: `npm install --legacy-peer-deps`,
+        addDev: `npm install --legacy-peer-deps -D`,
+        list: 'npm ls --depth 10',
+        runLerna: `npx lerna`,
+        exec: 'npx',
+      };
     },
-    yarn: {
-      createWorkspace: `npx ${
-        npmMajorVersion && +npmMajorVersion >= 7 ? '--yes' : ''
-      } create-nx-workspace@${publishedVersion}`,
-      run: (script: string, args: string) => `yarn ${script} ${args}`,
-      runNx: `yarn nx`,
-      runNxSilent:
-        yarnMajorVersion && +yarnMajorVersion >= 2
-          ? 'yarn nx'
-          : `yarn --silent nx`,
-      runUninstalledPackage: 'npx --yes',
-      install: 'yarn',
-      ciInstall: 'yarn --frozen-lockfile',
-      addProd: isYarnWorkspace ? 'yarn add -W' : 'yarn add',
-      addDev: isYarnWorkspace ? 'yarn add -DW' : 'yarn add -D',
-      list: 'yarn list --pattern',
-      runLerna:
-        yarnMajorVersion && +yarnMajorVersion >= 2
-          ? 'yarn lerna'
-          : `yarn --silent lerna`,
+    yarn: () => {
+      const yarnMajorVersion = getYarnMajorVersion(path);
+      const useYarnBerry = yarnMajorVersion && +yarnMajorVersion >= 2;
+      const isYarnWorkspace = fileExists(join(path, 'package.json'))
+        ? readJson('package.json').workspaces
+        : false;
+
+      return {
+        createWorkspace: `npx ${
+          npmMajorVersion && +npmMajorVersion >= 7 ? '--yes' : ''
+        } create-nx-workspace@${publishedVersion}`,
+        run: (script: string, args: string) => `yarn ${script} ${args}`,
+        runNx: `yarn nx`,
+        runNxSilent: useYarnBerry ? 'yarn nx' : `yarn --silent nx`,
+        runUninstalledPackage: 'npx --yes',
+        install: 'yarn',
+        ciInstall: 'yarn --frozen-lockfile',
+        addProd: isYarnWorkspace ? 'yarn add -W' : 'yarn add',
+        addDev: isYarnWorkspace ? 'yarn add -DW' : 'yarn add -D',
+        list: 'yarn list --pattern',
+        runLerna: useYarnBerry ? 'yarn lerna' : `yarn --silent lerna`,
+        exec: 'yarn',
+      };
     },
-    // Pnpm 3.5+ adds nx to
-    pnpm: {
-      createWorkspace: `pnpm dlx create-nx-workspace@${publishedVersion}`,
-      run: (script: string, args: string) => `pnpm run ${script} -- ${args}`,
-      runNx: `pnpm exec nx`,
-      runNxSilent: `pnpm exec nx`,
-      runUninstalledPackage: 'pnpm dlx',
-      install: 'pnpm i',
-      ciInstall: 'pnpm install --frozen-lockfile',
-      addProd: isPnpmWorkspace ? 'pnpm add -w' : 'pnpm add',
-      addDev: isPnpmWorkspace ? 'pnpm add -Dw' : 'pnpm add -D',
-      list: 'pnpm ls --depth 10',
-      runLerna: `pnpm exec lerna`,
+    pnpm: () => {
+      const pnpmVersion = getPnpmVersion(path);
+      const modernPnpm = pnpmVersion && gte(pnpmVersion, '6.13.0');
+      const isPnpmWorkspace = existsSync(join(path, 'pnpm-workspace.yaml'));
+
+      return {
+        createWorkspace: `pnpm dlx create-nx-workspace@${publishedVersion}`,
+        run: (script: string, args: string) => `pnpm run ${script} -- ${args}`,
+        runNx: `pnpm exec nx`,
+        runNxSilent: `pnpm exec nx`,
+        runUninstalledPackage: 'pnpm dlx',
+        install: 'pnpm i',
+        ciInstall: 'pnpm install --frozen-lockfile',
+        addProd: isPnpmWorkspace ? 'pnpm add -w' : 'pnpm add',
+        addDev: isPnpmWorkspace ? 'pnpm add -Dw' : 'pnpm add -D',
+        list: 'pnpm ls --depth 10',
+        runLerna: `pnpm exec lerna`,
+        exec: modernPnpm ? 'pnpm exec' : 'pnpx',
+      };
     },
-    bun: {
-      createWorkspace: `bunx create-nx-workspace@${publishedVersion}`,
-      run: (script: string, args: string) => `bun run ${script} -- ${args}`,
-      runNx: `bunx nx`,
-      runNxSilent: `bunx nx`,
-      runUninstalledPackage: `bunx --yes`,
-      install: 'bun install',
-      ciInstall: 'bun install --no-cache',
-      addProd: 'bun install',
-      addDev: 'bun install -D',
-      list: 'bun pm ls',
-      runLerna: `bunx lerna`,
+    bun: () => {
+      return {
+        createWorkspace: `bunx create-nx-workspace@${publishedVersion}`,
+        run: (script: string, args: string) => `bun run ${script} -- ${args}`,
+        runNx: `bunx nx`,
+        runNxSilent: `bunx nx`,
+        runUninstalledPackage: `bunx --yes`,
+        install: 'bun install',
+        ciInstall: 'bun install --no-cache',
+        addProd: 'bun install',
+        addDev: 'bun install -D',
+        list: 'bun pm ls',
+        runLerna: `bunx lerna`,
+        exec: 'bun',
+      };
     },
-  }[packageManager.trim() as PackageManager];
+  };
+
+  return commands[packageManager]();
 }
 
 export function runE2ETests(runner?: 'cypress' | 'playwright') {

e2e/utils/get-env-info.ts

@@ -99,6 +99,19 @@ export function getYarnMajorVersion(path: string): string | undefined {
   }
 }
 
+export function getPnpmVersion(path: string): string | undefined {
+  try {
+    // this fails if path is not yet created
+    return execSync(`pnpm -v`, { cwd: path, encoding: 'utf-8' }).trim();
+  } catch {
+    try {
+      return execSync(`pnpm -v`, { encoding: 'utf-8' }).trim();
+    } catch {
+      return undefined;
+    }
+  }
+}
+
 export function getLatestLernaVersion(): string {
   const lernaVersion = execSync(`npm view lerna version`, {
     encoding: 'utf-8',

package.json

@@ -25,19 +25,19 @@
   },
   "devDependencies": {
     "@actions/core": "^1.10.0",
-    "@angular-devkit/architect": "~0.1703.0",
-    "@angular-devkit/build-angular": "~17.3.0",
-    "@angular-devkit/core": "~17.3.0",
-    "@angular-devkit/schematics": "~17.3.0",
-    "@angular-eslint/eslint-plugin": "17.3.0",
-    "@angular-eslint/eslint-plugin-template": "17.3.0",
-    "@angular-eslint/template-parser": "17.3.0",
-    "@angular/cli": "~17.3.0",
-    "@angular/common": "~17.3.0",
-    "@angular/compiler": "~17.3.0",
-    "@angular/compiler-cli": "~17.3.0",
-    "@angular/core": "~17.3.0",
-    "@angular/router": "~17.3.0",
+    "@angular-devkit/architect": "~0.1800.0",
+    "@angular-devkit/build-angular": "~18.0.0",
+    "@angular-devkit/core": "~18.0.0",
+    "@angular-devkit/schematics": "~18.0.0",
+    "@angular-eslint/eslint-plugin": "~17.3.0",
+    "@angular-eslint/eslint-plugin-template": "~17.3.0",
+    "@angular-eslint/template-parser": "~17.3.0",
+    "@angular/cli": "~18.0.0",
+    "@angular/common": "~18.0.0",
+    "@angular/compiler": "~18.0.0",
+    "@angular/compiler-cli": "~18.0.0",
+    "@angular/core": "~18.0.0",
+    "@angular/router": "~18.0.0",
     "@babel/core": "^7.23.2",
     "@babel/helper-create-regexp-features-plugin": "^7.22.9",
     "@babel/plugin-transform-runtime": "^7.23.2",
@@ -92,7 +92,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-url": "^8.0.2",
-    "@schematics/angular": "~17.3.0",
+    "@schematics/angular": "~18.0.0",
     "@storybook/addon-essentials": "7.5.3",
     "@storybook/core-server": "7.5.3",
     "@storybook/react": "7.5.3",
@@ -226,7 +226,7 @@
     "mini-css-extract-plugin": "~2.4.7",
     "minimatch": "9.0.3",
     "next-sitemap": "^3.1.10",
-    "ng-packagr": "~17.3.0",
+    "ng-packagr": "~18.0.0",
     "node-fetch": "^2.6.7",
     "npm-package-arg": "11.0.1",
     "nuxt": "^3.10.0",

packages/angular/migrations.json

@@ -386,6 +386,15 @@
       },
       "description": "Update the @angular/cli package version to ~17.3.0.",
       "factory": "./src/migrations/update-18-2-0/update-angular-cli"
+    },
+    "update-angular-cli-version-18-0-0": {
+      "cli": "nx",
+      "version": "19.2.0-beta.0",
+      "requires": {
+        "@angular/core": ">=18.0.0"
+      },
+      "description": "Update the @angular/cli package version to ~18.0.0.",
+      "factory": "./src/migrations/update-19-2-0/update-angular-cli"
     }
   },
   "packageJsonUpdates": {
@@ -1805,6 +1814,63 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "19.2.0": {
+      "version": "19.2.0-beta.0",
+      "x-prompt": "Do you want to update the Angular version to v18?",
+      "requires": {
+        "@angular/core": ">=17.3.0 <18.0.0"
+      },
+      "packages": {
+        "@angular-devkit/build-angular": {
+          "version": "~18.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/core": {
+          "version": "~18.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/schematics": {
+          "version": "~18.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/pwa": {
+          "version": "~18.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/ssr": {
+          "version": "~18.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@schematics/angular": {
+          "version": "~18.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/architect": {
+          "version": "~0.1800.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular-devkit/build-webpack": {
+          "version": "~0.1800.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/core": {
+          "version": "~18.0.0",
+          "alwaysAddToPackageJson": true
+        },
+        "@angular/material": {
+          "version": "~18.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@angular/cdk": {
+          "version": "~18.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "ng-packagr": {
+          "version": "~18.0.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }