refactor(@angular/cli): remove direct use of ansi-colors package

The newly introduced `listr2` dependency used for the updated `ng add`
console UI provides color support. This removes the need to retain a
direct dependency on a color package within the `@angular/cli`.

Author: clydin

packages/angular/cli/BUILD.bazel

@@ -65,7 +65,6 @@ ts_library(
         "@npm//@types/yargs",
         "@npm//@types/yarnpkg__lockfile",
         "@npm//@yarnpkg/lockfile",
-        "@npm//ansi-colors",
         "@npm//ini",
         "@npm//jsonc-parser",
         "@npm//listr2",

packages/angular/cli/lib/cli/index.ts

@@ -10,7 +10,7 @@ import { logging } from '@angular-devkit/core';
 import { format, stripVTControlCharacters } from 'node:util';
 import { CommandModuleError } from '../../src/command-builder/command-module';
 import { runCommand } from '../../src/command-builder/command-runner';
-import { colors } from '../../src/utilities/color';
+import { colors, supportColor } from '../../src/utilities/color';
 import { ngDebug } from '../../src/utilities/environment-options';
 import { writeErrorToLogFile } from '../../src/utilities/log-file';
 
@@ -38,20 +38,21 @@ export default async function (options: { cliArgs: string[] }) {
   const colorLevels: Record<string, (message: string) => string> = {
     info: (s) => s,
     debug: (s) => s,
-    warn: (s) => colors.bold.yellow(s),
-    error: (s) => colors.bold.red(s),
-    fatal: (s) => colors.bold.red(s),
+    warn: (s) => colors.bold(colors.yellow(s)),
+    error: (s) => colors.bold(colors.red(s)),
+    fatal: (s) => colors.bold(colors.red(s)),
   };
   const logger = new logging.IndentLogger('cli-main-logger');
   const logInfo = console.log;
   const logError = console.error;
+  const useColor = supportColor();
 
   const loggerFinished = logger.forEach((entry) => {
     if (!ngDebug && entry.level === 'debug') {
       return;
     }
 
-    const color = colors.enabled ? colorLevels[entry.level] : stripVTControlCharacters;
+    const color = useColor ? colorLevels[entry.level] : stripVTControlCharacters;
     const message = color(entry.message);
 
     switch (entry.level) {

packages/angular/cli/package.json

@@ -29,7 +29,6 @@
     "@listr2/prompt-adapter-inquirer": "2.0.8",
     "@schematics/angular": "0.0.0-PLACEHOLDER",
     "@yarnpkg/lockfile": "1.1.0",
-    "ansi-colors": "4.1.3",
     "ini": "4.1.3",
     "jsonc-parser": "3.2.1",
     "listr2": "8.2.1",

packages/angular/cli/src/commands/update/cli.ts

@@ -30,7 +30,7 @@ import {
 } from '../../command-builder/command-module';
 import { SchematicEngineHost } from '../../command-builder/utilities/schematic-engine-host';
 import { subscribeToWorkflow } from '../../command-builder/utilities/schematic-workflow';
-import { colors } from '../../utilities/color';
+import { colors, figures } from '../../utilities/color';
 import { disableVersionCheck } from '../../utilities/environment-options';
 import { assertIsError } from '../../utilities/error';
 import { writeErrorToLogFile } from '../../utilities/log-file';
@@ -241,7 +241,7 @@ export default class UpdateCommandModule extends CommandModule<UpdateCommandArgs
       }
     }
 
-    logger.info(`Using package manager: ${colors.grey(packageManager.name)}`);
+    logger.info(`Using package manager: ${colors.gray(packageManager.name)}`);
     logger.info('Collecting installed dependencies...');
 
     const rootDependencies = await getProjectDependencies(this.context.root);
@@ -303,12 +303,12 @@ export default class UpdateCommandModule extends CommandModule<UpdateCommandArgs
       return { success: !workflowSubscription.error, files: workflowSubscription.files };
     } catch (e) {
       if (e instanceof UnsuccessfulWorkflowExecution) {
-        logger.error(`${colors.symbols.cross} Migration failed. See above for further details.\n`);
+        logger.error(`${figures.cross} Migration failed. See above for further details.\n`);
       } else {
         assertIsError(e);
         const logPath = writeErrorToLogFile(e);
         logger.fatal(
-          `${colors.symbols.cross} Migration failed: ${e.message}\n` +
+          `${figures.cross} Migration failed: ${e.message}\n` +
             `  See "${logPath}" for further details.\n`,
         );
       }
@@ -438,7 +438,7 @@ export default class UpdateCommandModule extends CommandModule<UpdateCommandArgs
     for (const migration of migrations) {
       const { title, description } = getMigrationTitleAndDescription(migration);
 
-      logger.info(colors.cyan(colors.symbols.pointer) + ' ' + colors.bold(title));
+      logger.info(colors.cyan(figures.pointer) + ' ' + colors.bold(title));
 
       if (description) {
         logger.info('  ' + description);
@@ -1088,7 +1088,7 @@ export default class UpdateCommandModule extends CommandModule<UpdateCommandArgs
     if (!isTTY()) {
       for (const migration of optionalMigrations) {
         const { title } = getMigrationTitleAndDescription(migration);
-        logger.info(colors.cyan(colors.symbols.pointer) + ' ' + colors.bold(title));
+        logger.info(colors.cyan(figures.pointer) + ' ' + colors.bold(title));
         logger.info(colors.gray(`  ng update ${packageName} --name ${migration.name}`));
         logger.info(''); // Extra trailing newline.
       }

packages/angular/cli/src/utilities/color.ts

@@ -6,10 +6,11 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import * as ansiColors from 'ansi-colors';
-import { WriteStream } from 'tty';
+import { WriteStream } from 'node:tty';
 
-function supportColor(): boolean {
+export { color as colors, figures } from 'listr2';
+
+export function supportColor(): boolean {
   if (process.env.FORCE_COLOR !== undefined) {
     // 2 colors: FORCE_COLOR = 0 (Disables colors), depth 1
     // 16 colors: FORCE_COLOR = 1, depth 4
@@ -35,9 +36,3 @@ function supportColor(): boolean {
 
   return false;
 }
-
-// Create a separate instance to prevent unintended global changes to the color configuration
-const colors = ansiColors.create();
-colors.enabled = supportColor();
-
-export { colors };

yarn.lock

@@ -516,7 +516,6 @@ __metadata:
     "@listr2/prompt-adapter-inquirer": "npm:2.0.8"
     "@schematics/angular": "npm:0.0.0-PLACEHOLDER"
     "@yarnpkg/lockfile": "npm:1.1.0"
-    ansi-colors: "npm:4.1.3"
     ini: "npm:4.1.3"
     jsonc-parser: "npm:3.2.1"
     listr2: "npm:8.2.1"