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

…ndencies

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

Closes #23617

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,30 @@ import { spawnSync } from 'child_process';
 import { join } from 'path';
 
 const binPath = join(require.resolve('@angular/cli/package.json'), '../bin/ng.js');
+const [, execPath, ...args] = process.argv;
+
+const hasPackageManagerArg = args.some((a) => a.includes('--package-manager'));
+if (!hasPackageManagerArg) {
+  const isNpm = /[\\/]_npx[/\\]/.test(execPath);
+  const isPnpm = /[\\/]pnpm[/\\]/.test(execPath);
+
+  let packageManager = 'npm';
+  if (isPnpm) {
+    packageManager = 'pnpm';
+  } else if (!isNpm && !isPnpm) {
+    packageManager = 'yarn';
+  }
+
+  args.push('--package-manager', packageManager);
+  if (isNpm && args.length) {
+    // NPM required `--` before flags.
+    const isFlag = args[0].charAt(0) === '-';
+    args.splice(isFlag ? 0 : 1, 0, '--');
+  }
+}
 
 // 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 {