refactor(@angular/cli): create package manager util class

Apart from better code quality, this helps reduce the time of CLI bootstrapping time, as retrieving the package manager name is a rather expensive operator due to the number of process spawns.

The package manager name isn't always needed until we run a command and therefore in some cases we can see an improvement of around `~600ms`. Ex: `ng b --help`. From ` 1.34s` to `0.76s`.

This will be important when we eventually introduce auto complete as users will get faster loopback.

Author: alan-agius4

Diff for: packages/angular/cli/src/command-builder/command-module.ts

@@ -18,9 +18,9 @@ import {
   Options as YargsOptions,
 } from 'yargs';
 import { Parser as yargsParser } from 'yargs/helpers';
-import { PackageManager } from '../../lib/config/workspace-schema';
 import { createAnalytics } from '../analytics/analytics';
 import { AngularWorkspace } from '../utilities/config';
+import { PackageManagerUtils } from '../utilities/package-manager';
 import { Option } from './utilities/json-schema';
 
 export type Options<T> = { [key in keyof T as CamelCaseKey<key>]: T[key] };
@@ -40,7 +40,7 @@ export interface CommandContext {
   workspace?: AngularWorkspace;
   globalConfiguration?: AngularWorkspace;
   logger: logging.Logger;
-  packageManager: PackageManager;
+  packageManager: PackageManagerUtils;
   /** Arguments parsed in free-from without parser configuration. */
   args: {
     positional: string[];

Diff for: packages/angular/cli/src/command-builder/command-runner.ts

@@ -29,7 +29,7 @@ import { UpdateCommandModule } from '../commands/update/cli';
 import { VersionCommandModule } from '../commands/version/cli';
 import { colors } from '../utilities/color';
 import { AngularWorkspace, getWorkspace } from '../utilities/config';
-import { getPackageManager } from '../utilities/package-manager';
+import { PackageManagerUtils } from '../utilities/package-manager';
 import { CommandContext, CommandModuleError, CommandScope } from './command-module';
 import { addCommandModuleToYargs, demandCommandFailureMessage } from './utilities/command';
 import { jsonHelpUsage } from './utilities/json-help';
@@ -80,14 +80,13 @@ export async function runCommand(args: string[], logger: logging.Logger): Promis
   }
 
   const root = workspace?.basePath ?? process.cwd();
-
   const context: CommandContext = {
     globalConfiguration,
     workspace,
     logger,
     currentDirectory: process.cwd(),
-    root: workspace?.basePath ?? process.cwd(),
-    packageManager: await getPackageManager(workspace?.basePath ?? process.cwd()),
+    root,
+    packageManager: new PackageManagerUtils({ globalConfiguration, workspace, root }),
     args: {
       positional: positional.map((v) => v.toString()),
       options: {

Diff for: packages/angular/cli/src/command-builder/schematics-command-module.ts

@@ -122,7 +122,7 @@ export abstract class SchematicsCommandModule
     const workflow = new NodeWorkflow(root, {
       force,
       dryRun,
-      packageManager,
+      packageManager: packageManager.name,
       // A schema registry is required to allow customizing addUndefinedDefaults
       registry: new schema.CoreSchemaRegistry(formats.standardFormats),
       packageRegistry,

Diff for: packages/angular/cli/src/commands/add/cli.ts

@@ -24,8 +24,6 @@ import {
   SchematicsCommandModule,
 } from '../../command-builder/schematics-command-module';
 import { colors } from '../../utilities/color';
-import { installPackage, installTempPackage } from '../../utilities/install-package';
-import { ensureCompatibleNpm } from '../../utilities/package-manager';
 import {
   NgAddSaveDependency,
   PackageManifest,
@@ -107,9 +105,9 @@ export class AddCommandModule
 
   // eslint-disable-next-line max-lines-per-function
   async run(options: Options<AddCommandArgs> & OtherOptions): Promise<number | void> {
-    const { root, logger, packageManager } = this.context;
+    const { logger, packageManager } = this.context;
     const { verbose, registry, collection, skipConfirmation } = options;
-    await ensureCompatibleNpm(root);
+    packageManager.ensureCompatibility();
 
     let packageIdentifier;
     try {
@@ -137,8 +135,8 @@ export class AddCommandModule
     const spinner = new Spinner();
 
     spinner.start('Determining package manager...');
-    const usingYarn = packageManager === PackageManager.Yarn;
-    spinner.info(`Using package manager: ${colors.grey(packageManager)}`);
+    const usingYarn = packageManager.name === PackageManager.Yarn;
+    spinner.info(`Using package manager: ${colors.grey(packageManager.name)}`);
 
     if (packageIdentifier.name && packageIdentifier.type === 'tag' && !packageIdentifier.rawSpec) {
       // only package name provided; search for viable version
@@ -270,30 +268,28 @@ export class AddCommandModule
     if (savePackage === false) {
       // Temporary packages are located in a different directory
       // Hence we need to resolve them using the temp path
-      const { status, tempNodeModules } = await installTempPackage(
+      const { success, tempNodeModules } = await packageManager.installTemp(
         packageIdentifier.raw,
-        packageManager,
         registry ? [`--registry="${registry}"`] : undefined,
       );
       const resolvedCollectionPath = require.resolve(join(collectionName, 'package.json'), {
         paths: [tempNodeModules],
       });
 
-      if (status !== 0) {
-        return status;
+      if (!success) {
+        return 1;
       }
 
       collectionName = dirname(resolvedCollectionPath);
     } else {
-      const status = await installPackage(
+      const success = await packageManager.install(
         packageIdentifier.raw,
-        packageManager,
         savePackage,
         registry ? [`--registry="${registry}"`] : undefined,
       );
 
-      if (status !== 0) {
-        return status;
+      if (!success) {
+        return 1;
       }
     }
 

Diff for: packages/angular/cli/src/commands/new/cli.ts

@@ -18,7 +18,6 @@ import {
   SchematicsCommandArgs,
   SchematicsCommandModule,
 } from '../../command-builder/schematics-command-module';
-import { ensureCompatibleNpm } from '../../utilities/package-manager';
 import { VERSION } from '../../utilities/version';
 
 interface NewCommandArgs extends SchematicsCommandArgs {
@@ -75,7 +74,7 @@ export class NewCommandModule
       !schematicOptions.skipInstall &&
       (schematicOptions.packageManager === undefined || schematicOptions.packageManager === 'npm')
     ) {
-      await ensureCompatibleNpm(this.context.root);
+      this.context.packageManager.ensureCompatibility();
     }
 
     return this.runSchematic({

Diff for: packages/angular/cli/src/commands/update/cli.ts

@@ -8,12 +8,12 @@
 
 import { UnsuccessfulWorkflowExecution } from '@angular-devkit/schematics';
 import { NodeWorkflow } from '@angular-devkit/schematics/tools';
-import { execSync } from 'child_process';
-import { existsSync, promises as fsPromises } from 'fs';
+import { execSync, spawnSync } from 'child_process';
+import { existsSync, promises as fs } from 'fs';
 import npa from 'npm-package-arg';
 import pickManifest from 'npm-pick-manifest';
 import * as path from 'path';
-import { join } from 'path';
+import { join, resolve } from 'path';
 import * as semver from 'semver';
 import { Argv } from 'yargs';
 import { PackageManager } from '../../../lib/config/workspace-schema';
@@ -27,9 +27,7 @@ import { SchematicEngineHost } from '../../command-builder/utilities/schematic-e
 import { subscribeToWorkflow } from '../../command-builder/utilities/schematic-workflow';
 import { colors } from '../../utilities/color';
 import { disableVersionCheck } from '../../utilities/environment-options';
-import { installAllPackages, runTempPackageBin } from '../../utilities/install-package';
 import { writeErrorToLogFile } from '../../utilities/log-file';
-import { ensureCompatibleNpm } from '../../utilities/package-manager';
 import {
   PackageIdentifier,
   PackageManifest,
@@ -167,7 +165,7 @@ export class UpdateCommandModule extends CommandModule<UpdateCommandArgs> {
   async run(options: Options<UpdateCommandArgs>): Promise<number | void> {
     const { logger, packageManager } = this.context;
 
-    await ensureCompatibleNpm(this.context.root);
+    packageManager.ensureCompatibility();
 
     // Check if the current installed CLI version is older than the latest compatible version.
     if (!disableVersionCheck) {
@@ -183,11 +181,7 @@ export class UpdateCommandModule extends CommandModule<UpdateCommandArgs> {
             `Installing a temporary Angular CLI versioned ${cliVersionToInstall} to perform the update.`,
         );
 
-        return runTempPackageBin(
-          `@angular/cli@${cliVersionToInstall}`,
-          packageManager,
-          process.argv.slice(2),
-        );
+        return this.runTempBinary(`@angular/cli@${cliVersionToInstall}`, process.argv.slice(2));
       }
     }
 
@@ -233,7 +227,7 @@ export class UpdateCommandModule extends CommandModule<UpdateCommandArgs> {
     logger.info(`Found ${rootDependencies.size} dependencies.`);
 
     const workflow = new NodeWorkflow(this.context.root, {
-      packageManager: this.context.packageManager,
+      packageManager: packageManager.name,
       packageManagerForce: options.force,
       // __dirname -> favor @schematics/update from this package
       // Otherwise, use packages from the active workspace (migrations)
@@ -252,7 +246,7 @@ export class UpdateCommandModule extends CommandModule<UpdateCommandArgs> {
           force: options.force,
           next: options.next,
           verbose: options.verbose,
-          packageManager,
+          packageManager: packageManager.name,
           packages: [],
         },
       );
@@ -681,28 +675,27 @@ export class UpdateCommandModule extends CommandModule<UpdateCommandArgs> {
         verbose: options.verbose,
         force: options.force,
         next: options.next,
-        packageManager: this.context.packageManager,
+        packageManager: this.context.packageManager.name,
         packages: packagesToUpdate,
       },
     );
 
     if (success) {
       try {
-        await fsPromises.rm(path.join(this.context.root, 'node_modules'), {
+        await fs.rm(path.join(this.context.root, 'node_modules'), {
           force: true,
           recursive: true,
           maxRetries: 3,
         });
       } catch {}
 
-      const result = await installAllPackages(
-        this.context.packageManager,
+      const installationSuccess = await this.context.packageManager.installAll(
         options.force ? ['--force'] : [],
         this.context.root,
       );
 
-      if (result !== 0) {
-        return result;
+      if (!installationSuccess) {
+        return 1;
       }
     }
 
@@ -891,7 +884,7 @@ export class UpdateCommandModule extends CommandModule<UpdateCommandArgs> {
       this.context.logger,
       {
         verbose,
-        usingYarn: this.context.packageManager === PackageManager.Yarn,
+        usingYarn: this.context.packageManager.name === PackageManager.Yarn,
       },
     );
 
@@ -928,6 +921,52 @@ export class UpdateCommandModule extends CommandModule<UpdateCommandArgs> {
     // We end up using Angular ClI v13 to run the migrations if we run the migrations using the CLI installed major version + 1 logic.
     return VERSION.major;
   }
+
+  private async runTempBinary(packageName: string, args: string[] = []): Promise<number> {
+    const { success, tempNodeModules } = await this.context.packageManager.installTemp(packageName);
+    if (!success) {
+      return 1;
+    }
+
+    // Remove version/tag etc... from package name
+    // Ex: @angular/cli@latest -> @angular/cli
+    const packageNameNoVersion = packageName.substring(0, packageName.lastIndexOf('@'));
+    const pkgLocation = join(tempNodeModules, packageNameNoVersion);
+    const packageJsonPath = join(pkgLocation, 'package.json');
+
+    // Get a binary location for this package
+    let binPath: string | undefined;
+    if (existsSync(packageJsonPath)) {
+      const content = await fs.readFile(packageJsonPath, 'utf-8');
+      if (content) {
+        const { bin = {} } = JSON.parse(content);
+        const binKeys = Object.keys(bin);
+
+        if (binKeys.length) {
+          binPath = resolve(pkgLocation, bin[binKeys[0]]);
+        }
+      }
+    }
+
+    if (!binPath) {
+      throw new Error(`Cannot locate bin for temporary package: ${packageNameNoVersion}.`);
+    }
+
+    const { status, error } = spawnSync(process.execPath, [binPath, ...args], {
+      stdio: 'inherit',
+      env: {
+        ...process.env,
+        NG_DISABLE_VERSION_CHECK: 'true',
+        NG_CLI_ANALYTICS: 'false',
+      },
+    });
+
+    if (status === null && error) {
+      throw error;
+    }
+
+    return status ?? 0;
+  }
 }
 
 /**

Diff for: packages/angular/cli/src/commands/version/cli.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { execSync } from 'child_process';
 import nodeModule from 'module';
 import { resolve } from 'path';
 import { Argv } from 'yargs';
@@ -49,10 +48,10 @@ export class VersionCommandModule extends CommandModule implements CommandModule
   }
 
   async run(): Promise<void> {
-    const logger = this.context.logger;
+    const { packageManager, logger, root } = this.context;
     const localRequire = nodeModule.createRequire(resolve(__filename, '../../../'));
     // Trailing slash is used to allow the path to be treated as a directory
-    const workspaceRequire = nodeModule.createRequire(this.context.root + '/');
+    const workspaceRequire = nodeModule.createRequire(root + '/');
 
     const cliPackage: PartialPackageInfo = localRequire('./package.json');
     let workspacePackage: PartialPackageInfo | undefined;
@@ -119,7 +118,7 @@ export class VersionCommandModule extends CommandModule implements CommandModule
       `
       Angular CLI: ${ngCliVersion}
       Node: ${process.versions.node}${unsupportedNodeVersion ? ' (Unsupported)' : ''}
-      Package Manager: ${this.getPackageManagerVersion()}
+      Package Manager: ${packageManager.name} ${packageManager.version ?? '<error>'} 
       OS: ${process.platform} ${process.arch}
 
       Angular: ${angularCoreVersion}
@@ -186,24 +185,4 @@ export class VersionCommandModule extends CommandModule implements CommandModule
 
     return '<error>';
   }
-
-  private getPackageManagerVersion(): string {
-    try {
-      const manager = this.context.packageManager;
-      const version = execSync(`${manager} --version`, {
-        encoding: 'utf8',
-        stdio: ['ignore', 'pipe', 'ignore'],
-        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();
-
-      return `${manager} ${version}`;
-    } catch {
-      return '<error>';
-    }
-  }
 }

Diff for: packages/angular/cli/src/utilities/config.ts

@@ -150,22 +150,20 @@ export class AngularWorkspace {
   }
 }
 
-const cachedWorkspaces = new Map<string, AngularWorkspace | null>();
-
+const cachedWorkspaces = new Map<string, AngularWorkspace | undefined>();
 export async function getWorkspace(
   level: 'local' | 'global' = 'local',
-): Promise<AngularWorkspace | null> {
-  const cached = cachedWorkspaces.get(level);
-  if (cached !== undefined) {
-    return cached;
+): Promise<AngularWorkspace | undefined> {
+  if (cachedWorkspaces.has(level)) {
+    return cachedWorkspaces.get(level);
   }
 
   const configPath = level === 'local' ? projectFilePath() : globalFilePath();
 
   if (!configPath) {
-    cachedWorkspaces.set(level, null);
+    cachedWorkspaces.set(level, undefined);
 
-    return null;
+    return undefined;
   }
 
   try {