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);
@@ -298,19 +297,21 @@ 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 {
+        packageManager?: string;
+      };
+      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 +321,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: json.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,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');
+  // 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');
 }