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/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 pkgJson = JSON.parse(
+        readFileSync(join(this.context.root, 'package.json'), 'utf-8'),
+      ) as {
+        packageManager?: string;
+      };
+      const result = getPackageManager(pkgJson);
+      if (result) {
+        return result;
+      }
+    } 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,
+        }),
+      ]),
+    );
+  };
 }

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');