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

When creating a new project, the `packageManager` field in `package.json` will be automatically set to the package manager used to create the project. This helps to ensure that the same package manager is used by all developers working on the project.

The package manager is detected in the following order:
1. `packageManager` field in `package.json`
2. Angular CLI configuration (`angular.json`)
3. Lock files (`package-lock.json`, `yarn.lock`, `pnpm-lock.yaml`)

Author: alan-agius4

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

@@ -8,7 +8,7 @@
 
 import { isJsonObject, json } 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);
@@ -311,6 +310,18 @@ export class PackageManagerUtils {
 
     let result: PackageManager | undefined;
     const { workspace: localWorkspace, globalConfiguration: globalWorkspace } = this.context;
+    try {
+      const { packageManager } = JSON.parse(
+        readFileSync(join(this.context.root, 'package.json'), 'utf-8'),
+      ) as {
+        packageManager?: string;
+      };
+
+      if (packageManager) {
+        return packageManager.split('@', 1)[0] as PackageManager;
+      }
+    } catch {}
+
     if (localWorkspace) {
       const project = getProjectByCwd(localWorkspace);
       if (project) {

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,15 @@ export default async function () {
     // Ensure local test registry is used when outside a project
     await setNPMConfigRegistry(true);
 
-    await ng('new', 'test-project', '--skip-install', '--no-zoneless');
+    await ng(
+      'new',
+      'test-project',
+      '--skip-install',
+      '--no-zoneless',
+      '--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');
+  // Avoid 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');
 }