refactor(@angular/cli): convert npm-package-arg usage from require to import

The typings package was already present for `npm-package-arg` and the removal of require usage supports the eventual shift to an ESM output for the CLI package.

Author: clydin

Diff for: packages/angular/cli/commands/add-impl.ts

@@ -8,6 +8,7 @@
 
 import { analytics, tags } from '@angular-devkit/core';
 import { NodePackageDoesNotSupportSchematics } from '@angular-devkit/schematics/tools';
+import npa from 'npm-package-arg';
 import { dirname, join } from 'path';
 import { intersects, prerelease, rcompare, satisfies, valid, validRange } from 'semver';
 import { PackageManager } from '../lib/config/workspace-schema';
@@ -28,8 +29,6 @@ import { Spinner } from '../utilities/spinner';
 import { isTTY } from '../utilities/tty';
 import { Schema as AddCommandSchema } from './add';
 
-const npa = require('npm-package-arg');
-
 export class AddCommand extends SchematicCommand<AddCommandSchema> {
   override readonly allowPrivateSchematics = true;
 
@@ -62,21 +61,12 @@ export class AddCommand extends SchematicCommand<AddCommandSchema> {
       return 1;
     }
 
-    if (packageIdentifier.registry && this.isPackageInstalled(packageIdentifier.name)) {
-      let validVersion = false;
-      const installedVersion = await this.findProjectVersion(packageIdentifier.name);
-      if (installedVersion) {
-        if (packageIdentifier.type === 'range') {
-          validVersion = satisfies(installedVersion, packageIdentifier.fetchSpec);
-        } else if (packageIdentifier.type === 'version') {
-          const v1 = valid(packageIdentifier.fetchSpec);
-          const v2 = valid(installedVersion);
-          validVersion = v1 !== null && v1 === v2;
-        } else if (!packageIdentifier.rawSpec) {
-          validVersion = true;
-        }
-      }
-
+    if (
+      packageIdentifier.name &&
+      packageIdentifier.registry &&
+      this.isPackageInstalled(packageIdentifier.name)
+    ) {
+      const validVersion = await this.isProjectVersionValid(packageIdentifier);
       if (validVersion) {
         // Already installed so just run schematic
         this.logger.info('Skipping installation: Package already installed');
@@ -92,7 +82,7 @@ export class AddCommand extends SchematicCommand<AddCommandSchema> {
     const usingYarn = packageManager === PackageManager.Yarn;
     spinner.info(`Using package manager: ${colors.grey(packageManager)}`);
 
-    if (packageIdentifier.type === 'tag' && !packageIdentifier.rawSpec) {
+    if (packageIdentifier.name && packageIdentifier.type === 'tag' && !packageIdentifier.rawSpec) {
       // only package name provided; search for viable version
       // plus special cases for packages that did not have peer deps setup
       spinner.start('Searching for compatible package version...');
@@ -126,7 +116,9 @@ export class AddCommand extends SchematicCommand<AddCommandSchema> {
         } else {
           packageIdentifier = npa.resolve(latestManifest.name, latestManifest.version);
         }
-        spinner.succeed(`Found compatible package version: ${colors.grey(packageIdentifier)}.`);
+        spinner.succeed(
+          `Found compatible package version: ${colors.grey(packageIdentifier.toString())}.`,
+        );
       } else if (!latestManifest || (await this.hasMismatchedPeer(latestManifest))) {
         // 'latest' is invalid so search for most recent matching package
         const versionManifests = Object.values(packageMetadata.versions).filter(
@@ -147,11 +139,15 @@ export class AddCommand extends SchematicCommand<AddCommandSchema> {
           spinner.warn("Unable to find compatible package.  Using 'latest'.");
         } else {
           packageIdentifier = newIdentifier;
-          spinner.succeed(`Found compatible package version: ${colors.grey(packageIdentifier)}.`);
+          spinner.succeed(
+            `Found compatible package version: ${colors.grey(packageIdentifier.toString())}.`,
+          );
         }
       } else {
         packageIdentifier = npa.resolve(latestManifest.name, latestManifest.version);
-        spinner.succeed(`Found compatible package version: ${colors.grey(packageIdentifier)}.`);
+        spinner.succeed(
+          `Found compatible package version: ${colors.grey(packageIdentifier.toString())}.`,
+        );
       }
     }
 
@@ -160,7 +156,7 @@ export class AddCommand extends SchematicCommand<AddCommandSchema> {
 
     try {
       spinner.start('Loading package information from registry...');
-      const manifest = await fetchPackageManifest(packageIdentifier, this.logger, {
+      const manifest = await fetchPackageManifest(packageIdentifier.toString(), this.logger, {
         registry: options.registry,
         verbose: options.verbose,
         usingYarn,
@@ -235,6 +231,28 @@ export class AddCommand extends SchematicCommand<AddCommandSchema> {
     return this.executeSchematic(collectionName, options['--']);
   }
 
+  private async isProjectVersionValid(packageIdentifier: npa.Result): Promise<boolean> {
+    if (!packageIdentifier.name) {
+      return false;
+    }
+
+    let validVersion = false;
+    const installedVersion = await this.findProjectVersion(packageIdentifier.name);
+    if (installedVersion) {
+      if (packageIdentifier.type === 'range' && packageIdentifier.fetchSpec) {
+        validVersion = satisfies(installedVersion, packageIdentifier.fetchSpec);
+      } else if (packageIdentifier.type === 'version') {
+        const v1 = valid(packageIdentifier.fetchSpec);
+        const v2 = valid(installedVersion);
+        validVersion = v1 !== null && v1 === v2;
+      } else if (!packageIdentifier.rawSpec) {
+        validVersion = true;
+      }
+    }
+
+    return validVersion;
+  }
+
   override async reportAnalytics(
     paths: string[],
     options: AddCommandSchema & Arguments,

Diff for: packages/angular/cli/commands/update-impl.ts

@@ -10,6 +10,7 @@ import { UnsuccessfulWorkflowExecution } from '@angular-devkit/schematics';
 import { NodeWorkflow } from '@angular-devkit/schematics/tools';
 import { execSync } from 'child_process';
 import * as fs from 'fs';
+import npa from 'npm-package-arg';
 import * as path from 'path';
 import * as semver from 'semver';
 import { PackageManager } from '../lib/config/workspace-schema';
@@ -36,7 +37,6 @@ import {
 } from '../utilities/package-tree';
 import { Schema as UpdateCommandSchema } from './update';
 
-const npa = require('npm-package-arg') as (selector: string) => PackageIdentifier;
 const pickManifest = require('npm-pick-manifest') as (
   metadata: PackageMetadata,
   selector: string,
@@ -340,7 +340,7 @@ export class UpdateCommand extends Command<UpdateCommandSchema> {
           packageIdentifier.fetchSpec = 'next';
         }
 
-        packages.push(packageIdentifier);
+        packages.push(packageIdentifier as PackageIdentifier);
       } catch (e) {
         this.logger.error(e.message);