feat(@angular/cli): add --json output to ng version

This commit introduces a `--json` option to the `ng version` command. When this flag is used, the command will output all version information in a machine-readable JSON format.

The JSON structure is designed to be a stable, well-organized public API, with information grouped into `cli`, `system`, and `packages` categories. This is useful for scripting, tool integration, and creating detailed, parsable bug reports.

The standard, human-readable output is still the default.

Author: clydin

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

@@ -10,7 +10,7 @@ import type { Argv } from 'yargs';
 import { CommandModule, CommandModuleImplementation } from '../../command-builder/command-module';
 import { colors } from '../../utilities/color';
 import { RootCommands } from '../command-config';
-import { VersionInfo, gatherVersionInfo } from './version-info';
+import { gatherVersionInfo } from './version-info';
 
 /**
  * The Angular CLI logo, displayed as ASCII art.
@@ -45,37 +45,61 @@ export default class VersionCommandModule
    * @returns The configured `yargs` instance.
    */
   builder(localYargs: Argv): Argv {
-    return localYargs;
+    return localYargs.option('json', {
+      describe: 'Outputs version information in JSON format.',
+      type: 'boolean',
+    });
   }
 
   /**
    * The main execution logic for the `ng version` command.
    */
-  async run(): Promise<void> {
+  async run(options: { json?: boolean }): Promise<void> {
     const { logger } = this.context;
     const versionInfo = gatherVersionInfo(this.context);
+
+    if (options.json) {
+      // eslint-disable-next-line no-console
+      console.log(JSON.stringify(versionInfo, null, 2));
+
+      return;
+    }
+
     const {
-      ngCliVersion,
-      nodeVersion,
-      unsupportedNodeVersion,
-      packageManagerName,
-      packageManagerVersion,
-      os,
-      arch,
-      versions,
+      cli: { version: ngCliVersion },
+      system: {
+        node: { version: nodeVersion, unsupported: unsupportedNodeVersion },
+        os: { platform: os, architecture: arch },
+        packageManager: { name: packageManagerName, version: packageManagerVersion },
+      },
+      packages,
     } = versionInfo;
 
-    const header = `
-      Angular CLI: ${ngCliVersion}
-      Node: ${nodeVersion}${unsupportedNodeVersion ? ' (Unsupported)' : ''}
-      Package Manager: ${packageManagerName} ${packageManagerVersion ?? '<error>'}
-      OS: ${os} ${arch}
-    `.replace(/^ {6}/gm, '');
+    const headerInfo = [
+      { label: 'Angular CLI', value: ngCliVersion },
+      {
+        label: 'Node.js',
+        value: `${nodeVersion}${unsupportedNodeVersion ? colors.yellow(' (Unsupported)') : ''}`,
+      },
+      {
+        label: 'Package Manager',
+        value: `${packageManagerName} ${packageManagerVersion ?? '<error>'}`,
+      },
+      { label: 'Operating System', value: `${os} ${arch}` },
+    ];
+
+    const maxHeaderLabelLength = Math.max(...headerInfo.map((l) => l.label.length));
+
+    const header = headerInfo
+      .map(
+        ({ label, value }) =>
+          `${colors.bold(label)}`.padEnd(maxHeaderLabelLength + 11) + `: ${colors.cyan(value)}`,
+      )
+      .join('\n');
 
-    const angularPackages = this.formatAngularPackages(versionInfo);
-    const packageTable = this.formatPackageTable(versions);
+    const packageTable = this.formatPackageTable(packages);
 
-    logger.info([ASCII_ART, header, angularPackages, packageTable].join('\n\n'));
+    logger.info([ASCII_ART, header, packageTable].join('\n\n'));
 
     if (unsupportedNodeVersion) {
       logger.warn(
@@ -84,36 +108,6 @@ export default class VersionCommandModule
     }
   }
 
-  /**
-   * Formats the Angular packages section of the version output.
-   * @param versionInfo An object containing the version information.
-   * @returns A string containing the formatted Angular packages information.
-   */
-  private formatAngularPackages(versionInfo: VersionInfo): string {
-    const { angularCoreVersion, angularSameAsCore } = versionInfo;
-    if (!angularCoreVersion) {
-      return 'Angular: <error>';
-    }
-
-    const wrappedPackages = angularSameAsCore
-      .reduce<string[]>((acc, name) => {
-        if (acc.length === 0) {
-          return [name];
-        }
-        const line = acc[acc.length - 1] + ', ' + name;
-        if (line.length > 60) {
-          acc.push(name);
-        } else {
-          acc[acc.length - 1] = line;
-        }
-
-        return acc;
-      }, [])
-      .join('\n... ');
-
-    return `Angular: ${angularCoreVersion}\n... ${wrappedPackages}`;
-  }
-
   /**
    * Formats the package table section of the version output.
    * @param versions A map of package names to their versions.
@@ -125,22 +119,33 @@ export default class VersionCommandModule
       return '';
     }
 
-    const header = 'Package';
-    const maxNameLength = Math.max(...versionKeys.map((key) => key.length));
-    const namePad = ' '.repeat(Math.max(0, maxNameLength - header.length) + 3);
+    const nameHeader = 'Package';
+    const versionHeader = 'Version';
 
-    const tableHeader = `${header}${namePad}Version`;
-    const separator = '-'.repeat(tableHeader.length);
+    const maxNameLength = Math.max(nameHeader.length, ...versionKeys.map((key) => key.length));
+    const maxVersionLength = Math.max(
+      versionHeader.length,
+      ...versionKeys.map((key) => versions[key].length),
+    );
 
     const tableRows = versionKeys
       .map((module) => {
-        const padding = ' '.repeat(maxNameLength - module.length + 3);
+        const name = module.padEnd(maxNameLength);
+        const version = versions[module];
+        const coloredVersion = version === '<error>' ? colors.red(version) : colors.cyan(version);
+        const padding = ' '.repeat(maxVersionLength - version.length);
 
-        return `${module}${padding}${versions[module]}`;
+        return `│ ${name} │ ${coloredVersion}${padding} │`;
       })
-      .sort()
-      .join('\n');
+      .sort();
+
+    const top = `┌─${'─'.repeat(maxNameLength)}─┬─${'─'.repeat(maxVersionLength)}─┐`;
+    const header = `│ ${nameHeader.padEnd(maxNameLength)} │ ${versionHeader.padEnd(
+      maxVersionLength,
+    )} │`;
+    const separator = `├─${'─'.repeat(maxNameLength)}─┼─${'─'.repeat(maxVersionLength)}─┤`;
+    const bottom = `└─${'─'.repeat(maxNameLength)}─┴─${'─'.repeat(maxVersionLength)}─┘`;
 
-    return `${tableHeader}\n${separator}\n${tableRows}`;
+    return [top, header, separator, ...tableRows, bottom].join('\n');
   }
 }

packages/angular/cli/src/commands/version/version-info.ts

@@ -23,16 +23,24 @@ interface PartialPackageInfo {
  * An object containing all the version information that will be displayed by the command.
  */
 export interface VersionInfo {
-  ngCliVersion: string;
-  angularCoreVersion: string;
-  angularSameAsCore: string[];
-  versions: Record<string, string>;
-  unsupportedNodeVersion: boolean;
-  nodeVersion: string;
-  packageManagerName: string;
-  packageManagerVersion: string | undefined;
-  os: string;
-  arch: string;
+  cli: {
+    version: string;
+  };
+  system: {
+    node: {
+      version: string;
+      unsupported: boolean;
+    };
+    os: {
+      platform: string;
+      architecture: string;
+    };
+    packageManager: {
+      name: string;
+      version: string | undefined;
+    };
+  };
+  packages: Record<string, string>;
 }
 
 /**
@@ -83,44 +91,32 @@ export function gatherVersionInfo(context: {
     }),
   );
 
-  const versions: Record<string, string> = {};
+  const packages: Record<string, string> = {};
   for (const name of packageNames) {
     if (PACKAGE_PATTERNS.some((p) => p.test(name))) {
-      versions[name] = getVersion(name, workspaceRequire);
-    }
-  }
-
-  const ngCliVersion = VERSION.full;
-  let angularCoreVersion = '';
-  const angularSameAsCore: string[] = [];
-
-  if (workspacePackage) {
-    // Filter all angular versions that are the same as core.
-    angularCoreVersion = versions['@angular/core'];
-    if (angularCoreVersion) {
-      for (const [name, version] of Object.entries(versions)) {
-        if (version === angularCoreVersion && name.startsWith('@angular/')) {
-          angularSameAsCore.push(name.replace(/^@angular\//, ''));
-          delete versions[name];
-        }
-      }
-
-      // Make sure we list them in alphabetical order.
-      angularSameAsCore.sort();
+      packages[name] = getVersion(name, workspaceRequire);
     }
   }
 
   return {
-    ngCliVersion,
-    angularCoreVersion,
-    angularSameAsCore,
-    versions,
-    unsupportedNodeVersion,
-    nodeVersion: process.versions.node,
-    packageManagerName: context.packageManager.name,
-    packageManagerVersion: context.packageManager.version,
-    os: process.platform,
-    arch: process.arch,
+    cli: {
+      version: VERSION.full,
+    },
+    system: {
+      node: {
+        version: process.versions.node,
+        unsupported: unsupportedNodeVersion,
+      },
+      os: {
+        platform: process.platform,
+        architecture: process.arch,
+      },
+      packageManager: {
+        name: context.packageManager.name,
+        version: context.packageManager.version,
+      },
+    },
+    packages,
   };
 }