feat(@schematics/angular): set packageManager in package.json on new projects

packages/angular/cli/src/commands/new/cli.ts

@@ -73,6 +73,10 @@ export default class NewCommandModule
       defaults,
     });
     workflow.registry.addSmartDefaultProvider('ng-cli-version', () => VERSION.full);
+    workflow.registry.addSmartDefaultProvider(
+      'packageManager',
+      () => this.context.packageManager.name,
+    );
 
     return this.runSchematic({
       collectionName,

packages/angular/cli/src/utilities/package-manager.ts

@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { isJsonObject, json } from '@angular-devkit/core';
+import { JsonValue, isJsonObject } from '@angular-devkit/core';
 import { execSync, spawn } from 'node:child_process';
-import { promises as fs, readdirSync, realpathSync, rmSync } from 'node:fs';
+import { promises as fs, readFileSync, readdirSync, realpathSync, rmSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 import { PackageManager } from '../../lib/config/workspace-schema';
@@ -233,7 +233,6 @@ export class PackageManagerUtils {
     }
 
     const filesInRoot = readdirSync(this.context.root);
-
     const hasNpmLock = this.hasLockfile(PackageManager.Npm, filesInRoot);
     const hasYarnLock = this.hasLockfile(PackageManager.Yarn, filesInRoot);
     const hasPnpmLock = this.hasLockfile(PackageManager.Pnpm, filesInRoot);
@@ -298,19 +297,19 @@ export class PackageManagerUtils {
   }
 
   private getConfiguredPackageManager(): PackageManager | undefined {
-    const getPackageManager = (source: json.JsonValue | undefined): PackageManager | undefined => {
-      if (source && isJsonObject(source)) {
-        const value = source['packageManager'];
-        if (typeof value === 'string') {
-          return value as PackageManager;
-        }
-      }
+    const { workspace: localWorkspace, globalConfiguration: globalWorkspace } = this.context;
+    let result: PackageManager | undefined;
 
-      return undefined;
-    };
+    try {
+      const packageJsonPath = join(this.context.root, 'package.json');
+      const pkgJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8')) as JsonValue;
+      result = getPackageManager(pkgJson);
+    } catch {}
+
+    if (result) {
+      return result;
+    }
 
-    let result: PackageManager | undefined;
-    const { workspace: localWorkspace, globalConfiguration: globalWorkspace } = this.context;
     if (localWorkspace) {
       const project = getProjectByCwd(localWorkspace);
       if (project) {
@@ -320,10 +319,19 @@ export class PackageManagerUtils {
       result ??= getPackageManager(localWorkspace.extensions['cli']);
     }
 
-    if (!result) {
-      result = getPackageManager(globalWorkspace.extensions['cli']);
-    }
+    result ??= getPackageManager(globalWorkspace.extensions['cli']);
 
     return result;
   }
 }
+
+function getPackageManager(source: JsonValue | undefined): PackageManager | undefined {
+  if (source && isJsonObject(source)) {
+    const value = source['packageManager'];
+    if (typeof value === 'string') {
+      return value.split('@', 1)[0] as PackageManager;
+    }
+  }
+
+  return undefined;
+}

packages/schematics/angular/workspace/files/package.json.template

@@ -21,6 +21,7 @@
     ]
   },
   "private": true,
+  <% if (packageManagerWithVersion) { %>"packageManager": "<%= packageManagerWithVersion %>",<% } %>
   "dependencies": {
     "@angular/common": "<%= latestVersions.Angular %>",
     "@angular/compiler": "<%= latestVersions.Angular %>",

packages/schematics/angular/workspace/index.ts

@@ -16,19 +16,46 @@ import {
   strings,
   url,
 } from '@angular-devkit/schematics';
+import { execSync } from 'node:child_process';
 import { latestVersions } from '../utility/latest-versions';
 import { Schema as WorkspaceOptions } from './schema';
 
 export default function (options: WorkspaceOptions): Rule {
-  return mergeWith(
-    apply(url('./files'), [
-      options.minimal ? filter((path) => !path.endsWith('editorconfig.template')) : noop(),
-      applyTemplates({
-        utils: strings,
-        ...options,
-        'dot': '.',
-        latestVersions,
-      }),
-    ]),
-  );
+  return () => {
+    const packageManager = options.packageManager;
+    let packageManagerWithVersion: string | undefined;
+
+    if (packageManager) {
+      let packageManagerVersion: string | undefined;
+      try {
+        packageManagerVersion = execSync(`${packageManager} --version`, {
+          encoding: 'utf8',
+          stdio: 'pipe',
+          env: {
+            ...process.env,
+            //  NPM updater notifier will prevents the child process from closing until it timeout after 3 minutes.
+            NO_UPDATE_NOTIFIER: '1',
+            NPM_CONFIG_UPDATE_NOTIFIER: 'false',
+          },
+        }).trim();
+      } catch {}
+
+      if (packageManagerVersion) {
+        packageManagerWithVersion = `${packageManager}@${packageManagerVersion}`;
+      }
+    }
+
+    return mergeWith(
+      apply(url('./files'), [
+        options.minimal ? filter((path) => !path.endsWith('editorconfig.template')) : noop(),
+        applyTemplates({
+          utils: strings,
+          ...options,
+          'dot': '.',
+          latestVersions,
+          packageManagerWithVersion,
+        }),
+      ]),
+    );
+  };
 }

packages/schematics/angular/workspace/schema.json

@@ -40,7 +40,10 @@
     "packageManager": {
       "description": "The package manager to use for installing dependencies.",
       "type": "string",
-      "enum": ["npm", "yarn", "pnpm", "bun"]
+      "enum": ["npm", "yarn", "pnpm", "bun"],
+      "$default": {
+        "$source": "packageManager"
+      }
     }
   },
   "required": ["name", "version"]

tests/legacy-cli/e2e/initialize/500-create-project.ts

@@ -2,7 +2,7 @@ import { join } from 'node:path';
 import { getGlobalVariable } from '../utils/env';
 import { expectFileToExist } from '../utils/fs';
 import { gitClean } from '../utils/git';
-import { setRegistry as setNPMConfigRegistry } from '../utils/packages';
+import { getActivePackageManager, setRegistry as setNPMConfigRegistry } from '../utils/packages';
 import { ng } from '../utils/process';
 import { prepareProjectForE2e, updateJsonFile } from '../utils/project';
 
@@ -20,7 +20,14 @@ export default async function () {
     // Ensure local test registry is used when outside a project
     await setNPMConfigRegistry(true);
 
-    await ng('new', 'test-project', '--skip-install');
+    await ng(
+      'new',
+      'test-project',
+      '--skip-install',
+      '--package-manager',
+      getActivePackageManager(),
+    );
+
     await expectFileToExist(join(process.cwd(), 'test-project'));
     process.chdir('./test-project');
 

tests/legacy-cli/e2e/setup/100-global-cli.ts

@@ -5,8 +5,8 @@ import { globalNpm } from '../utils/process';
 const PACKAGE_MANAGER_VERSION = {
   'npm': '10.8.1',
   'yarn': '1.22.22',
-  'pnpm': '9.3.0',
-  'bun': '1.1.13',
+  'pnpm': '10.17.1',
+  'bun': '1.2.21',
 };
 
 export default async function () {

tests/legacy-cli/e2e/tests/commands/add/file.ts

@@ -1,8 +1,13 @@
+import { copyFile } from 'node:fs/promises';
 import { assetDir } from '../../../utils/assets';
 import { expectFileToExist } from '../../../utils/fs';
 import { ng } from '../../../utils/process';
 
 export default async function () {
-  await ng('add', assetDir('add-collection.tgz'), '--name=blah', '--skip-confirmation');
+  // Avoids ERR_PNPM_ENAMETOOLONG errors.
+  const tarball = './add-collection.tgz';
+  await copyFile(assetDir(tarball), tarball);
+
+  await ng('add', tarball, '--name=blah', '--skip-confirmation');
   await expectFileToExist('blah');
 }