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`

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,34 @@ 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;
+
+console.warn({
+  execPath,
+});
+
+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,7 +1,7 @@
 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';
+import { npm, silentNpm, silentYarn } from '../../utils/process';
 
 export default async function () {
   const currentDirectory = process.cwd();
@@ -15,7 +15,7 @@ export default async function () {
 
     switch (packageManager) {
       case 'npm':
-        await silentNpm('init', '@angular', projectName, '--', '--skip-install', '--style=scss');
+        await npm('init', '@angular', projectName, '--', '--skip-install', '--style=scss');
 
         break;
       case 'yarn':
@@ -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 {