refactor(@angular/build): use listr2 for spinner and color support

The `ansi-color` and `ora` dependencies have been replaced with `listr2`.
This package provides both color and spinner capabilities and further
reduces the dependency count. This also aligns the dependencies with
the `@angular/cli` package with already uses `listr2`. The spinner also
now will not overwrite console output that happens to be written while
the spinner is active. Instead, the output will be written after the
spinner task is complete.

Author: clydin

packages/angular/build/BUILD.bazel

@@ -76,16 +76,15 @@ ts_library(
         "@npm//@types/semver",
         "@npm//@types/watchpack",
         "@npm//@vitejs/plugin-basic-ssl",
-        "@npm//ansi-colors",
         "@npm//browserslist",
         "@npm//critters",
         "@npm//esbuild",
         "@npm//fast-glob",
         "@npm//https-proxy-agent",
+        "@npm//listr2",
         "@npm//lmdb",
         "@npm//magic-string",
         "@npm//mrmime",
-        "@npm//ora",
         "@npm//parse5-html-rewriting-stream",
         "@npm//picomatch",
         "@npm//piscina",

packages/angular/build/package.json

@@ -26,16 +26,15 @@
     "@babel/plugin-syntax-import-attributes": "7.24.7",
     "@inquirer/confirm": "3.1.14",
     "@vitejs/plugin-basic-ssl": "1.1.0",
-    "ansi-colors": "4.1.3",
     "browserslist": "^4.23.0",
     "critters": "0.0.24",
     "esbuild": "0.23.0",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.5",
+    "listr2": "8.2.3",
     "lmdb": "3.0.12",
     "magic-string": "0.30.10",
     "mrmime": "2.0.0",
-    "ora": "5.4.1",
     "parse5-html-rewriting-stream": "7.0.0",
     "picomatch": "4.0.2",
     "piscina": "4.6.1",

packages/angular/build/src/builders/application/options.ts

@@ -13,7 +13,7 @@ import { access, constants } from 'node:fs/promises';
 import { createRequire } from 'node:module';
 import path from 'node:path';
 import { normalizeAssetPatterns, normalizeOptimization, normalizeSourceMaps } from '../../utils';
-import { colors } from '../../utils/color';
+import { supportColor } from '../../utils/color';
 import { useJSONBuildLogs } from '../../utils/environment-options';
 import { I18nOptions, createI18nOptions } from '../../utils/i18n-options';
 import { IndexHtmlTransform } from '../../utils/index-file/index-html-generator';
@@ -366,7 +366,7 @@ export async function normalizeOptions(
     plugins: extensions?.codePlugins?.length ? extensions?.codePlugins : undefined,
     loaderExtensions,
     jsonLogs: useJSONBuildLogs,
-    colors: colors.enabled,
+    colors: supportColor(),
     clearScreen,
     define,
   };

packages/angular/build/src/tools/esbuild/utils.ts

@@ -8,6 +8,7 @@
 
 import { BuilderContext } from '@angular-devkit/architect';
 import { BuildOptions, Metafile, OutputFile, formatMessages } from 'esbuild';
+import { Listr } from 'listr2';
 import { createHash } from 'node:crypto';
 import { constants as fsConstants } from 'node:fs';
 import fs from 'node:fs/promises';
@@ -20,7 +21,6 @@ import {
   NormalizedOutputOptions,
 } from '../../builders/application/options';
 import { BudgetCalculatorResult } from '../../utils/bundle-calculator';
-import { Spinner } from '../../utils/spinner';
 import { BundleStats, generateEsbuildBuildStatsTable } from '../../utils/stats-table';
 import { BuildOutputFile, BuildOutputFileType, InitialFileRecord } from './bundler-context';
 import { BuildOutputAsset, ExecutionResult } from './bundler-execution-result';
@@ -146,14 +146,22 @@ export async function calculateEstimatedTransferSizes(
 }
 
 export async function withSpinner<T>(text: string, action: () => T | Promise<T>): Promise<T> {
-  const spinner = new Spinner(text);
-  spinner.start();
+  let result;
+  const taskList = new Listr(
+    [
+      {
+        title: text,
+        async task() {
+          result = await action();
+        },
+      },
+    ],
+    { rendererOptions: { clearOutput: true } },
+  );
 
-  try {
-    return await action();
-  } finally {
-    spinner.stop();
-  }
+  await taskList.run();
+
+  return result as T;
 }
 
 export async function withNoProgress<T>(text: string, action: () => T | Promise<T>): Promise<T> {

packages/angular/build/src/utils/color.ts

@@ -6,38 +6,19 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import * as ansiColors from 'ansi-colors';
 import { WriteStream } from 'node:tty';
 
-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
-    // 256 colors: FORCE_COLOR = 2, depth 8
-    // 16,777,216 colors: FORCE_COLOR = 3, depth 16
-    // See: https://nodejs.org/dist/latest-v12.x/docs/api/tty.html#tty_writestream_getcolordepth_env
-    // and https://github.com/nodejs/node/blob/b9f36062d7b5c5039498e98d2f2c180dca2a7065/lib/internal/tty.js#L106;
-    switch (process.env.FORCE_COLOR) {
-      case '':
-      case 'true':
-      case '1':
-      case '2':
-      case '3':
-        return true;
-      default:
-        return false;
-    }
-  }
+export { color as colors, figures } from 'listr2';
 
-  if (process.stdout instanceof WriteStream) {
-    return process.stdout.hasColors();
+export function supportColor(stream: NodeJS.WritableStream = process.stdout): boolean {
+  if (stream instanceof WriteStream) {
+    return stream.hasColors();
   }
 
-  return false;
+  try {
+    // The hasColors function does not rely on any instance state and should ideally be static
+    return WriteStream.prototype.hasColors();
+  } catch {
+    return process.env['FORCE_COLOR'] !== undefined && process.env['FORCE_COLOR'] !== '0';
+  }
 }
-
-// Create a separate instance to prevent unintended global changes to the color configuration
-const colors = ansiColors.create();
-colors.enabled = supportColor();
-
-export { colors };

packages/angular/build/src/utils/spinner.ts

@@ -1,3 +1,4 @@
+import assert from 'node:assert/strict';
 import { getGlobalVariable } from '../../utils/env';
 import { ng } from '../../utils/process';
 
@@ -15,7 +16,9 @@ export default async function () {
 
   let logs;
   if (getGlobalVariable('argv')['esbuild']) {
-    logs = ['Building...'];
+    assert.match(stdout, /Building\.\.\./);
+
+    return;
   } else {
     logs = [
       'Browser application bundle generation complete',

tests/legacy-cli/e2e/tests/build/progress-and-stats.ts

@@ -402,16 +402,15 @@ __metadata:
     "@babel/plugin-syntax-import-attributes": "npm:7.24.7"
     "@inquirer/confirm": "npm:3.1.14"
     "@vitejs/plugin-basic-ssl": "npm:1.1.0"
-    ansi-colors: "npm:4.1.3"
     browserslist: "npm:^4.23.0"
     critters: "npm:0.0.24"
     esbuild: "npm:0.23.0"
     fast-glob: "npm:3.3.2"
     https-proxy-agent: "npm:7.0.5"
+    listr2: "npm:8.2.3"
     lmdb: "npm:3.0.12"
     magic-string: "npm:0.30.10"
     mrmime: "npm:2.0.0"
-    ora: "npm:5.4.1"
     parse5-html-rewriting-stream: "npm:7.0.0"
     picomatch: "npm:4.0.2"
     piscina: "npm:4.6.1"