fix(@angular/create): use appropriate package manager to install dependencies

Previously, NPM was always used to install dependencies even when using `yarn create` or `pnpm create`.

Closes #23617

Author: alan-agius4

packages/angular/create/README.md

@@ -1,19 +1,25 @@
 # `@angular/create`
 
-# Create an Angular CLI workspace
+## Create an Angular CLI workspace
 
 Scaffold an Angular CLI workspace without needing to install the Angular CLI globally. All of the [ng new](https://angular.io/cli/new) options and features are supported.
 
-# Usage
+## Usage
 
-NPM
+### npm
 
 ```
 npm init @angular [project-name] -- [...options]
 ```
 
-Yarn
+### yarn
 
 ```
 yarn create @angular [project-name] [...options]
 ```
+
+### pnpm
+
+```
+pnpm create @angular [project-name] [...options]
+```

packages/angular/create/src/index.ts

@@ -11,9 +11,19 @@ import { spawnSync } from 'child_process';
 import { join } from 'path';
 
 const binPath = join(require.resolve('@angular/cli/package.json'), '../bin/ng.js');
+const args = process.argv.slice(2);
+
+const hasPackageManagerArg = args.some((a) => a.startsWith('--package-manager'));
+if (!hasPackageManagerArg) {
+  // Ex: yarn/1.22.18 npm/? node/v16.15.1 linux x64
+  const packageManager = process.env['npm_config_user_agent']?.split('/')[0];
+  if (packageManager && ['npm', 'pnpm', 'yarn', 'cnpm'].includes(packageManager)) {
+    args.push('--package-manager', packageManager);
+  }
+}
 
 // Invoke ng new with any parameters provided.
-const { error } = spawnSync(process.execPath, [binPath, 'new', ...process.argv.slice(2)], {
+const { error } = spawnSync(process.execPath, [binPath, 'new', ...args], {
   stdio: 'inherit',
 });
 

tests/legacy-cli/e2e/tests/misc/create-angular.ts

@@ -1,5 +1,5 @@
 import { join, resolve } from 'path';
-import { expectFileToExist, rimraf } from '../../utils/fs';
+import { expectFileToExist, readFile, rimraf } from '../../utils/fs';
 import { getActivePackageManager } from '../../utils/packages';
 import { silentNpm, silentYarn } from '../../utils/process';
 
@@ -26,7 +26,12 @@ export default async function () {
         throw new Error(`This test is not configured to use ${packageManager}.`);
     }
 
-    await expectFileToExist(join(projectName, 'angular.json'));
+    // Check that package manager has been configured based on the package manager used to invoke the create command.
+    const workspace = JSON.parse(await readFile(join(projectName, 'angular.json')));
+    if (workspace.cli?.packageManager !== packageManager) {
+      throw new Error(`Expected 'packageManager' option to be configured to ${packageManager}.`);
+    }
+
     // Verify styles was create with correct extension.
     await expectFileToExist(join(projectName, 'src/styles.scss'));
   } finally {