@angular/cli 20.2.0-next.1 → 20.2.0-next.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/cli",
-  "version": "20.2.0-next.1",
+  "version": "20.2.0-next.3",
   "description": "CLI tool for Angular",
   "main": "lib/cli/index.js",
   "bin": {
@@ -25,20 +25,19 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "dependencies": {
-    "@angular-devkit/architect": "0.2002.0-next.1",
-    "@angular-devkit/core": "20.2.0-next.1",
-    "@angular-devkit/schematics": "20.2.0-next.1",
-    "@inquirer/prompts": "7.7.1",
+    "@angular-devkit/architect": "0.2002.0-next.3",
+    "@angular-devkit/core": "20.2.0-next.3",
+    "@angular-devkit/schematics": "20.2.0-next.3",
+    "@inquirer/prompts": "7.8.0",
     "@listr2/prompt-adapter-inquirer": "3.0.1",
-    "@modelcontextprotocol/sdk": "1.16.0",
-    "@schematics/angular": "20.2.0-next.1",
+    "@modelcontextprotocol/sdk": "1.17.1",
+    "@schematics/angular": "20.2.0-next.3",
     "@yarnpkg/lockfile": "1.1.0",
-    "algoliasearch": "5.34.0",
+    "algoliasearch": "5.35.0",
     "ini": "5.0.0",
     "jsonc-parser": "3.3.1",
     "listr2": "9.0.1",
-    "npm-package-arg": "12.0.2",
-    "npm-pick-manifest": "10.0.0",
+    "npm-package-arg": "13.0.0",
     "pacote": "21.0.0",
     "resolve": "1.22.10",
     "semver": "7.7.2",
@@ -48,14 +47,14 @@
   "ng-update": {
     "migrations": "@schematics/angular/migrations/migration-collection.json",
     "packageGroup": {
-      "@angular/cli": "20.2.0-next.1",
-      "@angular/build": "20.2.0-next.1",
-      "@angular/ssr": "20.2.0-next.1",
-      "@angular-devkit/architect": "0.2002.0-next.1",
-      "@angular-devkit/build-angular": "20.2.0-next.1",
-      "@angular-devkit/build-webpack": "0.2002.0-next.1",
-      "@angular-devkit/core": "20.2.0-next.1",
-      "@angular-devkit/schematics": "20.2.0-next.1"
+      "@angular/cli": "20.2.0-next.3",
+      "@angular/build": "20.2.0-next.3",
+      "@angular/ssr": "20.2.0-next.3",
+      "@angular-devkit/architect": "0.2002.0-next.3",
+      "@angular-devkit/build-angular": "20.2.0-next.3",
+      "@angular-devkit/build-webpack": "0.2002.0-next.3",
+      "@angular-devkit/core": "20.2.0-next.3",
+      "@angular-devkit/schematics": "20.2.0-next.3"
     }
   },
   "packageManager": "pnpm@9.15.9",

package/src/commands/mcp/cli.js

@@ -18,7 +18,7 @@ To start using the Angular CLI MCP Server, add this configuration to your host:
   "mcpServers": {
     "angular-cli": {
       "command": "npx",
-      "args": ["@angular/cli", "mcp"]
+      "args": ["-y", "@angular/cli", "mcp"]
     }
   }
 }
@@ -37,7 +37,7 @@ class McpCommandModule extends command_module_1.CommandModule {
             this.context.logger.info(INTERACTIVE_MESSAGE);
             return;
         }
-        const server = await (0, mcp_server_1.createMcpServer)({ workspace: this.context.workspace });
+        const server = await (0, mcp_server_1.createMcpServer)({ workspace: this.context.workspace }, this.context.logger);
         const transport = new stdio_js_1.StdioServerTransport();
         await server.connect(transport);
     }

package/src/commands/mcp/instructions/best-practices.md

@@ -9,10 +9,12 @@ You are an expert in TypeScript, Angular, and scalable web application developme
 ## Angular Best Practices
 
 - Always use standalone components over NgModules
-- Don't use explicit `standalone: true` (it is implied by default)
+- Must NOT set `standalone: true` inside Angular decorators. It's the default.
 - Use signals for state management
 - Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
 - Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
 
 ## Components
 
@@ -30,6 +32,7 @@ You are an expert in TypeScript, Angular, and scalable web application developme
 - Use signals for local component state
 - Use `computed()` for derived state
 - Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
 
 ## Templates
 
@@ -42,3 +45,8 @@ You are an expert in TypeScript, Angular, and scalable web application developme
 - Design services around a single responsibility
 - Use the `providedIn: 'root'` option for singleton services
 - Use the `inject()` function instead of constructor injection
+
+## Common pitfalls
+
+- Control flow (`@if`):
+  - You cannot use `as` expressions in `@else if (...)`. E.g. invalid code: `@else if (bla(); as x)`.

package/src/commands/mcp/mcp-server.d.ts

@@ -9,4 +9,6 @@ import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import type { AngularWorkspace } from '../../utilities/config';
 export declare function createMcpServer(context: {
     workspace?: AngularWorkspace;
+}, logger: {
+    warn(text: string): void;
 }): Promise<McpServer>;

package/src/commands/mcp/mcp-server.js

@@ -17,15 +17,20 @@ const node_path_1 = __importDefault(require("node:path"));
 const version_1 = require("../../utilities/version");
 const best_practices_1 = require("./tools/best-practices");
 const doc_search_1 = require("./tools/doc-search");
+const examples_1 = require("./tools/examples");
 const projects_1 = require("./tools/projects");
-async function createMcpServer(context) {
+async function createMcpServer(context, logger) {
     const server = new mcp_js_1.McpServer({
         name: 'angular-cli-server',
         version: version_1.VERSION.full,
+    }, {
         capabilities: {
             resources: {},
             tools: {},
+            logging: {},
         },
+        instructions: 'For Angular development, this server provides tools to adhere to best practices, search documentation, and find code examples. ' +
+            'When writing or modifying Angular code, use the MCP server and its tools instead of direct shell commands where possible.',
     });
     server.registerResource('instructions', 'instructions://best-practices', {
         title: 'Angular Best Practices and Code Generation Guide',
@@ -39,7 +44,21 @@ async function createMcpServer(context) {
         return { contents: [{ uri: 'instructions://best-practices', text }] };
     });
     (0, best_practices_1.registerBestPracticesTool)(server);
-    (0, projects_1.registerListProjectsTool)(server, context);
+    // If run outside an Angular workspace (e.g., globally) skip the workspace specific tools.
+    if (context.workspace) {
+        (0, projects_1.registerListProjectsTool)(server, context);
+    }
     await (0, doc_search_1.registerDocSearchTool)(server);
+    if (process.env['NG_MCP_CODE_EXAMPLES'] === '1') {
+        // sqlite database support requires Node.js 22.16+
+        const [nodeMajor, nodeMinor] = process.versions.node.split('.', 2).map(Number);
+        if (nodeMajor < 22 || (nodeMajor === 22 && nodeMinor < 16)) {
+            logger.warn(`MCP tool 'find_examples' requires Node.js 22.16 (or higher). ` +
+                ' Registration of this tool has been skipped.');
+        }
+        else {
+            await (0, examples_1.registerFindExampleTool)(server, node_path_1.default.join(__dirname, '../../../lib/code-examples.db'));
+        }
+    }
     return server;
 }

package/src/commands/mcp/tools/best-practices.js

@@ -14,6 +14,7 @@ exports.registerBestPracticesTool = registerBestPracticesTool;
 const promises_1 = require("node:fs/promises");
 const node_path_1 = __importDefault(require("node:path"));
 function registerBestPracticesTool(server) {
+    let bestPracticesText;
     server.registerTool('get_best_practices', {
         title: 'Get Angular Coding Best Practices Guide',
         description: 'You **MUST** use this tool to retrieve the Angular Best Practices Guide ' +
@@ -26,12 +27,16 @@ function registerBestPracticesTool(server) {
             openWorldHint: false,
         },
     }, async () => {
-        const text = await (0, promises_1.readFile)(node_path_1.default.join(__dirname, '..', 'instructions', 'best-practices.md'), 'utf-8');
+        bestPracticesText ??= await (0, promises_1.readFile)(node_path_1.default.join(__dirname, '..', 'instructions', 'best-practices.md'), 'utf-8');
         return {
             content: [
                 {
                     type: 'text',
-                    text,
+                    text: bestPracticesText,
+                    annotations: {
+                        audience: ['assistant'],
+                        priority: 0.9,
+                    },
                 },
             ],
         };

package/src/commands/mcp/tools/examples.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+/**
+ * Registers the `find_examples` tool with the MCP server.
+ *
+ * This tool allows users to search for best-practice Angular code examples
+ * from a local SQLite database.
+ *
+ * @param server The MCP server instance.
+ * @param exampleDatabasePath The path to the SQLite database file containing the examples.
+ */
+export declare function registerFindExampleTool(server: McpServer, exampleDatabasePath: string): Promise<void>;
+/**
+ * Escapes a search query for FTS5 by tokenizing and quoting terms.
+ *
+ * This function processes a raw search string and prepares it for an FTS5 full-text search.
+ * It correctly handles quoted phrases, logical operators (AND, OR, NOT), parentheses,
+ * and prefix searches (ending with an asterisk), ensuring that individual search
+ * terms are properly quoted to be treated as literals by the search engine.
+ * This is primarily intended to avoid unintentional usage of FTS5 query syntax by consumers.
+ *
+ * @param query The raw search query string.
+ * @returns A sanitized query string suitable for FTS5.
+ */
+export declare function escapeSearchQuery(query: string): string;

package/src/commands/mcp/tools/examples.js

@@ -0,0 +1,217 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerFindExampleTool = registerFindExampleTool;
+exports.escapeSearchQuery = escapeSearchQuery;
+const promises_1 = require("node:fs/promises");
+const node_path_1 = __importDefault(require("node:path"));
+const zod_1 = require("zod");
+/**
+ * Registers the `find_examples` tool with the MCP server.
+ *
+ * This tool allows users to search for best-practice Angular code examples
+ * from a local SQLite database.
+ *
+ * @param server The MCP server instance.
+ * @param exampleDatabasePath The path to the SQLite database file containing the examples.
+ */
+async function registerFindExampleTool(server, exampleDatabasePath) {
+    let db;
+    let queryStatement;
+    // Runtime directory of examples uses an in-memory database
+    if (process.env['NG_MCP_EXAMPLES_DIR']) {
+        db = await setupRuntimeExamples(process.env['NG_MCP_EXAMPLES_DIR']);
+    }
+    suppressSqliteWarning();
+    server.registerTool('find_examples', {
+        title: 'Find Angular Code Examples',
+        description: 'Before writing or modifying any Angular code including templates, ' +
+            '**ALWAYS** use this tool to find current best-practice examples. ' +
+            'This is critical for ensuring code quality and adherence to modern Angular standards. ' +
+            'This tool searches a curated database of approved Angular code examples and returns the most relevant results for your query. ' +
+            'Example Use Cases: ' +
+            "1) Creating new components, directives, or services (e.g., query: 'standalone component' or 'signal input'). " +
+            "2) Implementing core features (e.g., query: 'lazy load route', 'httpinterceptor', or 'route guard'). " +
+            "3) Refactoring existing code to use modern patterns (e.g., query: 'ngfor trackby' or 'form validation').",
+        inputSchema: {
+            query: zod_1.z.string().describe(`Performs a full-text search using FTS5 syntax. The query should target relevant Angular concepts.
+
+Key Syntax Features (see https://www.sqlite.org/fts5.html for full documentation):
+  - AND (default): Space-separated terms are combined with AND.
+    - Example: 'standalone component' (finds results with both "standalone" and "component")
+  - OR: Use the OR operator to find results with either term.
+    - Example: 'validation OR validator'
+  - NOT: Use the NOT operator to exclude terms.
+    - Example: 'forms NOT reactive'
+  - Grouping: Use parentheses () to group expressions.
+    - Example: '(validation OR validator) AND forms'
+  - Phrase Search: Use double quotes "" for exact phrases.
+    - Example: '"template-driven forms"'
+  - Prefix Search: Use an asterisk * for prefix matching.
+    - Example: 'rout*' (matches "route", "router", "routing")
+
+Examples of queries:
+  - Find standalone components: 'standalone component'
+  - Find ngFor with trackBy: 'ngFor trackBy'
+  - Find signal inputs: 'signal input'
+  - Find lazy loading a route: 'lazy load route'
+  - Find forms with validation: 'form AND (validation OR validator)'`),
+        },
+        annotations: {
+            readOnlyHint: true,
+            openWorldHint: false,
+        },
+    }, async ({ query }) => {
+        if (!db) {
+            const { DatabaseSync } = await Promise.resolve().then(() => __importStar(require('node:sqlite')));
+            db = new DatabaseSync(exampleDatabasePath, { readOnly: true });
+        }
+        if (!queryStatement) {
+            queryStatement = db.prepare('SELECT * from examples WHERE examples MATCH ? ORDER BY rank;');
+        }
+        const sanitizedQuery = escapeSearchQuery(query);
+        // Query database and return results as text content
+        const content = [];
+        for (const exampleRecord of queryStatement.all(sanitizedQuery)) {
+            content.push({ type: 'text', text: exampleRecord['content'] });
+        }
+        return {
+            content,
+        };
+    });
+}
+/**
+ * Escapes a search query for FTS5 by tokenizing and quoting terms.
+ *
+ * This function processes a raw search string and prepares it for an FTS5 full-text search.
+ * It correctly handles quoted phrases, logical operators (AND, OR, NOT), parentheses,
+ * and prefix searches (ending with an asterisk), ensuring that individual search
+ * terms are properly quoted to be treated as literals by the search engine.
+ * This is primarily intended to avoid unintentional usage of FTS5 query syntax by consumers.
+ *
+ * @param query The raw search query string.
+ * @returns A sanitized query string suitable for FTS5.
+ */
+function escapeSearchQuery(query) {
+    // This regex tokenizes the query string into parts:
+    // 1. Quoted phrases (e.g., "foo bar")
+    // 2. Parentheses ( and )
+    // 3. FTS5 operators (AND, OR, NOT, NEAR)
+    // 4. Words, which can include a trailing asterisk for prefix search (e.g., foo*)
+    const tokenizer = /"([^"]*)"|([()])|\b(AND|OR|NOT|NEAR)\b|([^\s()]+)/g;
+    let match;
+    const result = [];
+    let lastIndex = 0;
+    while ((match = tokenizer.exec(query)) !== null) {
+        // Add any whitespace or other characters between tokens
+        if (match.index > lastIndex) {
+            result.push(query.substring(lastIndex, match.index));
+        }
+        const [, quoted, parenthesis, operator, term] = match;
+        if (quoted !== undefined) {
+            // It's a quoted phrase, keep it as is.
+            result.push(`"${quoted}"`);
+        }
+        else if (parenthesis) {
+            // It's a parenthesis, keep it as is.
+            result.push(parenthesis);
+        }
+        else if (operator) {
+            // It's an operator, keep it as is.
+            result.push(operator);
+        }
+        else if (term) {
+            // It's a term that needs to be quoted.
+            if (term.endsWith('*')) {
+                result.push(`"${term.slice(0, -1)}"*`);
+            }
+            else {
+                result.push(`"${term}"`);
+            }
+        }
+        lastIndex = tokenizer.lastIndex;
+    }
+    // Add any remaining part of the string
+    if (lastIndex < query.length) {
+        result.push(query.substring(lastIndex));
+    }
+    return result.join('');
+}
+/**
+ * Suppresses the experimental warning emitted by Node.js for the `node:sqlite` module.
+ *
+ * This is a workaround to prevent the console from being cluttered with warnings
+ * about the experimental status of the SQLite module, which is used by this tool.
+ */
+function suppressSqliteWarning() {
+    const originalProcessEmit = process.emit;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    process.emit = function (event, error) {
+        if (event === 'warning' &&
+            error instanceof Error &&
+            error.name === 'ExperimentalWarning' &&
+            error.message.includes('SQLite')) {
+            return false;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, prefer-rest-params
+        return originalProcessEmit.apply(process, arguments);
+    };
+}
+async function setupRuntimeExamples(examplesPath) {
+    const { DatabaseSync } = await Promise.resolve().then(() => __importStar(require('node:sqlite')));
+    const db = new DatabaseSync(':memory:');
+    db.exec(`CREATE VIRTUAL TABLE examples USING fts5(content, tokenize = 'porter ascii');`);
+    const insertStatement = db.prepare('INSERT INTO examples(content) VALUES(?);');
+    db.exec('BEGIN TRANSACTION');
+    for await (const entry of (0, promises_1.glob)('*.md', { cwd: examplesPath, withFileTypes: true })) {
+        if (!entry.isFile()) {
+            continue;
+        }
+        const example = await (0, promises_1.readFile)(node_path_1.default.join(entry.parentPath, entry.name), 'utf-8');
+        insertStatement.run(example);
+    }
+    db.exec('END TRANSACTION');
+    return db;
+}

package/src/commands/update/cli.js

@@ -52,7 +52,6 @@ const node_module_1 = require("node:module");
 const path = __importStar(require("node:path"));
 const node_path_1 = require("node:path");
 const npm_package_arg_1 = __importDefault(require("npm-package-arg"));
-const npm_pick_manifest_1 = __importDefault(require("npm-pick-manifest"));
 const semver = __importStar(require("semver"));
 const workspace_schema_1 = require("../../../lib/config/workspace-schema");
 const command_module_1 = require("../../command-builder/command-module");
@@ -189,9 +188,11 @@ class UpdateCommandModule extends command_module_1.CommandModule {
                 if (options.migrateOnly && packageIdentifier.rawSpec !== '*') {
                     logger.warn('Package specifier has no effect when using "migrate-only" option.');
                 }
-                // If next option is used and no specifier supplied, use next tag
-                if (options.next && packageIdentifier.rawSpec === '*') {
-                    packageIdentifier.fetchSpec = 'next';
+                // Wildcard uses the next tag if next option is used otherwise use latest tag.
+                // Wildcard is present if no selector is provided on the command line.
+                if (packageIdentifier.rawSpec === '*') {
+                    packageIdentifier.fetchSpec = options.next ? 'next' : 'latest';
+                    packageIdentifier.type = 'tag';
                 }
                 packages.push(packageIdentifier);
             }
@@ -480,35 +481,39 @@ class UpdateCommandModule extends command_module_1.CommandModule {
             // Try to find a package version based on the user requested package specifier
             // registry specifier types are either version, range, or tag
             let manifest;
-            if (requestIdentifier.type === 'version' ||
-                requestIdentifier.type === 'range' ||
-                requestIdentifier.type === 'tag') {
-                try {
-                    manifest = (0, npm_pick_manifest_1.default)(metadata, requestIdentifier.fetchSpec);
-                }
-                catch (e) {
-                    (0, error_1.assertIsError)(e);
-                    if (e.code === 'ETARGET') {
-                        // If not found and next was used and user did not provide a specifier, try latest.
-                        // Package may not have a next tag.
-                        if (requestIdentifier.type === 'tag' &&
-                            requestIdentifier.fetchSpec === 'next' &&
-                            !requestIdentifier.rawSpec) {
-                            try {
-                                manifest = (0, npm_pick_manifest_1.default)(metadata, 'latest');
-                            }
-                            catch (e) {
-                                (0, error_1.assertIsError)(e);
-                                if (e.code !== 'ETARGET' && e.code !== 'ENOVERSIONS') {
-                                    throw e;
-                                }
-                            }
-                        }
+            switch (requestIdentifier.type) {
+                case 'tag':
+                    manifest = metadata.tags[requestIdentifier.fetchSpec];
+                    // If not found and next option was used and user did not provide a specifier, try latest.
+                    // Package may not have a next tag.
+                    if (!manifest &&
+                        requestIdentifier.fetchSpec === 'next' &&
+                        requestIdentifier.rawSpec === '*') {
+                        manifest = metadata.tags['latest'];
                     }
-                    else if (e.code !== 'ENOVERSIONS') {
-                        throw e;
+                    break;
+                case 'version':
+                    manifest = metadata.versions[requestIdentifier.fetchSpec];
+                    break;
+                case 'range':
+                    for (const potentialManifest of Object.values(metadata.versions)) {
+                        // Ignore deprecated package versions
+                        if (potentialManifest.deprecated) {
+                            continue;
+                        }
+                        // Only consider versions that are within the range
+                        if (!semver.satisfies(potentialManifest.version, requestIdentifier.fetchSpec, {
+                            loose: true,
+                        })) {
+                            continue;
+                        }
+                        // Update the used manifest if current potential is newer than existing or there is not one yet
+                        if (!manifest ||
+                            semver.gt(potentialManifest.version, manifest.version, { loose: true })) {
+                            manifest = potentialManifest;
+                        }
                     }
-                }
+                    break;
             }
             if (!manifest) {
                 logger.error(`Package specified by '${requestIdentifier.raw}' does not exist within the registry.`);

package/src/commands/version/cli.d.ts

@@ -5,14 +5,36 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
-import { Argv } from 'yargs';
+import type { Argv } from 'yargs';
 import { CommandModule, CommandModuleImplementation } from '../../command-builder/command-module';
+/**
+ * The command-line module for the `ng version` command.
+ */
 export default class VersionCommandModule extends CommandModule implements CommandModuleImplementation {
     command: string;
     aliases: string[] | undefined;
     describe: string;
     longDescriptionPath?: string | undefined;
+    /**
+     * Builds the command-line options for the `ng version` command.
+     * @param localYargs The `yargs` instance to configure.
+     * @returns The configured `yargs` instance.
+     */
     builder(localYargs: Argv): Argv;
+    /**
+     * The main execution logic for the `ng version` command.
+     */
     run(): Promise<void>;
-    private getVersion;
+    /**
+     * 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;
+    /**
+     * Formats the package table section of the version output.
+     * @param versions A map of package names to their versions.
+     * @returns A string containing the formatted package table.
+     */
+    private formatPackageTable;
 }

package/src/commands/version/cli.js

@@ -6,104 +6,74 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const node_module_1 = __importDefault(require("node:module"));
-const node_path_1 = require("node:path");
 const command_module_1 = require("../../command-builder/command-module");
 const color_1 = require("../../utilities/color");
 const command_config_1 = require("../command-config");
+const version_info_1 = require("./version-info");
 /**
- * Major versions of Node.js that are officially supported by Angular.
+ * The Angular CLI logo, displayed as ASCII art.
+ */
+const ASCII_ART = `
+     _                      _                 ____ _     ___
+    / \\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
+   / △ \\ | '_ \\ / _\` | | | | |/ _\` | '__|   | |   | |    | |
+  / ___ \\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
+ /_/   \\_\\_| |_|\\__, |\\__,_|_|\\__,_|_|       \\____|_____|___|
+                |___/
+    `
+    .split('\n')
+    .map((x) => color_1.colors.red(x))
+    .join('\n');
+/**
+ * The command-line module for the `ng version` command.
  */
-const SUPPORTED_NODE_MAJORS = [20, 22, 24];
-const PACKAGE_PATTERNS = [
-    /^@angular\/.*/,
-    /^@angular-devkit\/.*/,
-    /^@ngtools\/.*/,
-    /^@schematics\/.*/,
-    /^rxjs$/,
-    /^typescript$/,
-    /^ng-packagr$/,
-    /^webpack$/,
-    /^zone\.js$/,
-];
 class VersionCommandModule extends command_module_1.CommandModule {
     command = 'version';
     aliases = command_config_1.RootCommands['version'].aliases;
     describe = 'Outputs Angular CLI version.';
     longDescriptionPath;
+    /**
+     * Builds the command-line options for the `ng version` command.
+     * @param localYargs The `yargs` instance to configure.
+     * @returns The configured `yargs` instance.
+     */
     builder(localYargs) {
         return localYargs;
     }
+    /**
+     * The main execution logic for the `ng version` command.
+     */
     async run() {
-        const { packageManager, logger, root } = this.context;
-        const localRequire = node_module_1.default.createRequire((0, node_path_1.resolve)(__filename, '../../../'));
-        // Trailing slash is used to allow the path to be treated as a directory
-        const workspaceRequire = node_module_1.default.createRequire(root + '/');
-        const cliPackage = localRequire('./package.json');
-        let workspacePackage;
-        try {
-            workspacePackage = workspaceRequire('./package.json');
-        }
-        catch { }
-        const [nodeMajor] = process.versions.node.split('.').map((part) => Number(part));
-        const unsupportedNodeVersion = !SUPPORTED_NODE_MAJORS.includes(nodeMajor);
-        const packageNames = new Set(Object.keys({
-            ...cliPackage.dependencies,
-            ...cliPackage.devDependencies,
-            ...workspacePackage?.dependencies,
-            ...workspacePackage?.devDependencies,
-        }));
-        const versions = {};
-        for (const name of packageNames) {
-            if (PACKAGE_PATTERNS.some((p) => p.test(name))) {
-                versions[name] = this.getVersion(name, workspaceRequire, localRequire);
-            }
+        const { logger } = this.context;
+        const versionInfo = (0, version_info_1.gatherVersionInfo)(this.context);
+        const { ngCliVersion, nodeVersion, unsupportedNodeVersion, packageManagerName, packageManagerVersion, os, arch, versions, } = versionInfo;
+        const header = `
+      Angular CLI: ${ngCliVersion}
+      Node: ${nodeVersion}${unsupportedNodeVersion ? ' (Unsupported)' : ''}
+      Package Manager: ${packageManagerName} ${packageManagerVersion ?? '<error>'}
+      OS: ${os} ${arch}
+    `.replace(/^ {6}/gm, '');
+        const angularPackages = this.formatAngularPackages(versionInfo);
+        const packageTable = this.formatPackageTable(versions);
+        logger.info([ASCII_ART, header, angularPackages, packageTable].join('\n\n'));
+        if (unsupportedNodeVersion) {
+            logger.warn(`Warning: The current version of Node (${nodeVersion}) is not supported by Angular.`);
         }
-        const ngCliVersion = cliPackage.version;
-        let angularCoreVersion = '';
-        const angularSameAsCore = [];
-        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();
-            }
+    }
+    /**
+     * 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.
+     */
+    formatAngularPackages(versionInfo) {
+        const { angularCoreVersion, angularSameAsCore } = versionInfo;
+        if (!angularCoreVersion) {
+            return 'Angular: <error>';
         }
-        const namePad = ' '.repeat(Object.keys(versions).sort((a, b) => b.length - a.length)[0].length + 3);
-        const asciiArt = `
-     _                      _                 ____ _     ___
-    / \\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
-   / △ \\ | '_ \\ / _\` | | | | |/ _\` | '__|   | |   | |    | |
-  / ___ \\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
- /_/   \\_\\_| |_|\\__, |\\__,_|_|\\__,_|_|       \\____|_____|___|
-                |___/
-    `
-            .split('\n')
-            .map((x) => color_1.colors.red(x))
-            .join('\n');
-        logger.info(asciiArt);
-        logger.info(`
-      Angular CLI: ${ngCliVersion}
-      Node: ${process.versions.node}${unsupportedNodeVersion ? ' (Unsupported)' : ''}
-      Package Manager: ${packageManager.name} ${packageManager.version ?? '<error>'}
-      OS: ${process.platform} ${process.arch}
-
-      Angular: ${angularCoreVersion}
-      ... ${angularSameAsCore
+        const wrappedPackages = angularSameAsCore
             .reduce((acc, name) => {
-            // Perform a simple word wrap around 60.
-            if (acc.length == 0) {
+            if (acc.length === 0) {
                 return [name];
             }
             const line = acc[acc.length - 1] + ', ' + name;
@@ -115,43 +85,32 @@ class VersionCommandModule extends command_module_1.CommandModule {
             }
             return acc;
         }, [])
-            .join('\n... ')}
-
-      Package${namePad.slice(7)}Version
-      -------${namePad.replace(/ /g, '-')}------------------
-      ${Object.keys(versions)
-            .map((module) => `${module}${namePad.slice(module.length)}${versions[module]}`)
-            .sort()
-            .join('\n')}
-    `.replace(/^ {6}/gm, ''));
-        if (unsupportedNodeVersion) {
-            logger.warn(`Warning: The current version of Node (${process.versions.node}) is not supported by Angular.`);
-        }
+            .join('\n... ');
+        return `Angular: ${angularCoreVersion}\n... ${wrappedPackages}`;
     }
-    getVersion(moduleName, workspaceRequire, localRequire) {
-        let packageInfo;
-        let cliOnly = false;
-        // Try to find the package in the workspace
-        try {
-            packageInfo = workspaceRequire(`${moduleName}/package.json`);
-        }
-        catch { }
-        // If not found, try to find within the CLI
-        if (!packageInfo) {
-            try {
-                packageInfo = localRequire(`${moduleName}/package.json`);
-                cliOnly = true;
-            }
-            catch { }
+    /**
+     * Formats the package table section of the version output.
+     * @param versions A map of package names to their versions.
+     * @returns A string containing the formatted package table.
+     */
+    formatPackageTable(versions) {
+        const versionKeys = Object.keys(versions);
+        if (versionKeys.length === 0) {
+            return '';
         }
-        // If found, attempt to get the version
-        if (packageInfo) {
-            try {
-                return packageInfo.version + (cliOnly ? ' (cli-only)' : '');
-            }
-            catch { }
-        }
-        return '<error>';
+        const header = 'Package';
+        const maxNameLength = Math.max(...versionKeys.map((key) => key.length));
+        const namePad = ' '.repeat(Math.max(0, maxNameLength - header.length) + 3);
+        const tableHeader = `${header}${namePad}Version`;
+        const separator = '-'.repeat(tableHeader.length);
+        const tableRows = versionKeys
+            .map((module) => {
+            const padding = ' '.repeat(maxNameLength - module.length + 3);
+            return `${module}${padding}${versions[module]}`;
+        })
+            .sort()
+            .join('\n');
+        return `${tableHeader}\n${separator}\n${tableRows}`;
     }
 }
 exports.default = VersionCommandModule;

package/src/commands/version/version-info.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+/**
+ * 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;
+}
+/**
+ * Gathers all the version information from the environment and workspace.
+ * @returns An object containing all the version information.
+ */
+export declare function gatherVersionInfo(context: {
+    packageManager: {
+        name: string;
+        version: string | undefined;
+    };
+    root: string;
+}): VersionInfo;

package/src/commands/version/version-info.js

@@ -0,0 +1,122 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gatherVersionInfo = gatherVersionInfo;
+const node_module_1 = require("node:module");
+const node_path_1 = require("node:path");
+/**
+ * Major versions of Node.js that are officially supported by Angular.
+ * @see https://angular.dev/reference/versions#supported-node-js-versions
+ */
+const SUPPORTED_NODE_MAJORS = [20, 22, 24];
+/**
+ * A list of regular expression patterns that match package names that should be included in the
+ * version output.
+ */
+const PACKAGE_PATTERNS = [
+    /^@angular\/.*/,
+    /^@angular-devkit\/.*/,
+    /^@ngtools\/.*/,
+    /^@schematics\/.*/,
+    /^rxjs$/,
+    /^typescript$/,
+    /^ng-packagr$/,
+    /^webpack$/,
+    /^zone\.js$/,
+];
+/**
+ * Gathers all the version information from the environment and workspace.
+ * @returns An object containing all the version information.
+ */
+function gatherVersionInfo(context) {
+    const localRequire = (0, node_module_1.createRequire)((0, node_path_1.resolve)(__filename, '../../../'));
+    // Trailing slash is used to allow the path to be treated as a directory
+    const workspaceRequire = (0, node_module_1.createRequire)(context.root + '/');
+    const cliPackage = localRequire('./package.json');
+    let workspacePackage;
+    try {
+        workspacePackage = workspaceRequire('./package.json');
+    }
+    catch { }
+    const [nodeMajor] = process.versions.node.split('.').map((part) => Number(part));
+    const unsupportedNodeVersion = !SUPPORTED_NODE_MAJORS.includes(nodeMajor);
+    const packageNames = new Set(Object.keys({
+        ...cliPackage.dependencies,
+        ...cliPackage.devDependencies,
+        ...workspacePackage?.dependencies,
+        ...workspacePackage?.devDependencies,
+    }));
+    const versions = {};
+    for (const name of packageNames) {
+        if (PACKAGE_PATTERNS.some((p) => p.test(name))) {
+            versions[name] = getVersion(name, workspaceRequire, localRequire);
+        }
+    }
+    const ngCliVersion = cliPackage.version;
+    let angularCoreVersion = '';
+    const angularSameAsCore = [];
+    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();
+        }
+    }
+    return {
+        ngCliVersion,
+        angularCoreVersion,
+        angularSameAsCore,
+        versions,
+        unsupportedNodeVersion,
+        nodeVersion: process.versions.node,
+        packageManagerName: context.packageManager.name,
+        packageManagerVersion: context.packageManager.version,
+        os: process.platform,
+        arch: process.arch,
+    };
+}
+/**
+ * Gets the version of a package.
+ * @param moduleName The name of the package.
+ * @param workspaceRequire A `require` function for the workspace.
+ * @param localRequire A `require` function for the CLI.
+ * @returns The version of the package, or `<error>` if it could not be found.
+ */
+function getVersion(moduleName, workspaceRequire, localRequire) {
+    let packageInfo;
+    let cliOnly = false;
+    // Try to find the package in the workspace
+    try {
+        packageInfo = workspaceRequire(`${moduleName}/package.json`);
+    }
+    catch { }
+    // If not found, try to find within the CLI
+    if (!packageInfo) {
+        try {
+            packageInfo = localRequire(`${moduleName}/package.json`);
+            cliOnly = true;
+        }
+        catch { }
+    }
+    // If found, attempt to get the version
+    if (packageInfo) {
+        try {
+            return packageInfo.version + (cliOnly ? ' (cli-only)' : '');
+        }
+        catch { }
+    }
+    return '<error>';
+}

package/src/utilities/environment-options.d.ts

@@ -5,8 +5,21 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
+/** Disables all analytics reporting when the `NG_CLI_ANALYTICS` environment variable is set to '0' or 'false'. */
 export declare const analyticsDisabled: boolean;
+/** Identifies when the CLI is running in a Continuous Integration environment. */
 export declare const isCI: boolean;
+/** Disables the automatic version check when the `NG_DISABLE_VERSION_CHECK` environment variable is enabled. */
 export declare const disableVersionCheck: boolean;
+/** Enables debugging messages when the `NG_DEBUG` environment variable is enabled. */
 export declare const ngDebug: boolean;
+/**
+ * Forces the autocomplete script to be generated.
+ * The `NG_FORCE_AUTOCOMPLETE` environment variable can be 'true', 'false', or undefined (for default behavior).
+ */
 export declare const forceAutocomplete: boolean | undefined;
+/**
+ * When enabled, forces TTY mode.
+ * The `NG_FORCE_TTY` environment variable can be 'true', 'false', or undefined (for default behavior).
+ */
+export declare const forceTty: boolean | undefined;

package/src/utilities/environment-options.js

@@ -7,24 +7,53 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.forceAutocomplete = exports.ngDebug = exports.disableVersionCheck = exports.isCI = exports.analyticsDisabled = void 0;
+exports.forceTty = exports.forceAutocomplete = exports.ngDebug = exports.disableVersionCheck = exports.isCI = exports.analyticsDisabled = void 0;
+/** A set of strings that are considered "truthy" when parsing environment variables. */
+const TRUTHY_VALUES = new Set(['1', 'true']);
+/** A set of strings that are considered "falsy" when parsing environment variables. */
+const FALSY_VALUES = new Set(['0', 'false']);
+/**
+ * Checks if an environment variable is present and has a non-empty value.
+ * @param variable The environment variable to check.
+ * @returns `true` if the variable is a non-empty string.
+ */
 function isPresent(variable) {
     return typeof variable === 'string' && variable !== '';
 }
-function isDisabled(variable) {
-    return isPresent(variable) && (variable === '0' || variable.toLowerCase() === 'false');
-}
-function isEnabled(variable) {
-    return isPresent(variable) && (variable === '1' || variable.toLowerCase() === 'true');
-}
-function optional(variable) {
+/**
+ * Parses an environment variable into a boolean or undefined.
+ * @returns `true` if the variable is truthy ('1', 'true').
+ * @returns `false` if the variable is falsy ('0', 'false').
+ * @returns `undefined` if the variable is not present or has an unknown value.
+ */
+function parseTristate(variable) {
     if (!isPresent(variable)) {
         return undefined;
     }
-    return isEnabled(variable);
+    const value = variable.toLowerCase();
+    if (TRUTHY_VALUES.has(value)) {
+        return true;
+    }
+    if (FALSY_VALUES.has(value)) {
+        return false;
+    }
+    return undefined;
 }
-exports.analyticsDisabled = isDisabled(process.env['NG_CLI_ANALYTICS']);
-exports.isCI = isEnabled(process.env['CI']);
-exports.disableVersionCheck = isEnabled(process.env['NG_DISABLE_VERSION_CHECK']);
-exports.ngDebug = isEnabled(process.env['NG_DEBUG']);
-exports.forceAutocomplete = optional(process.env['NG_FORCE_AUTOCOMPLETE']);
+/** Disables all analytics reporting when the `NG_CLI_ANALYTICS` environment variable is set to '0' or 'false'. */
+exports.analyticsDisabled = parseTristate(process.env['NG_CLI_ANALYTICS']) === false;
+/** Identifies when the CLI is running in a Continuous Integration environment. */
+exports.isCI = parseTristate(process.env['CI']) === true;
+/** Disables the automatic version check when the `NG_DISABLE_VERSION_CHECK` environment variable is enabled. */
+exports.disableVersionCheck = parseTristate(process.env['NG_DISABLE_VERSION_CHECK']) === true;
+/** Enables debugging messages when the `NG_DEBUG` environment variable is enabled. */
+exports.ngDebug = parseTristate(process.env['NG_DEBUG']) === true;
+/**
+ * Forces the autocomplete script to be generated.
+ * The `NG_FORCE_AUTOCOMPLETE` environment variable can be 'true', 'false', or undefined (for default behavior).
+ */
+exports.forceAutocomplete = parseTristate(process.env['NG_FORCE_AUTOCOMPLETE']);
+/**
+ * When enabled, forces TTY mode.
+ * The `NG_FORCE_TTY` environment variable can be 'true', 'false', or undefined (for default behavior).
+ */
+exports.forceTty = parseTristate(process.env['NG_FORCE_TTY']);

package/src/utilities/tty.d.ts

@@ -5,4 +5,12 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
+/**
+ * Determines if the `stream` is a TTY.
+ *
+ * @param stream A NodeJS stream to check. Defaults to `process.stdout`.
+ * @returns `true` if the `stream` is a TTY, `false` otherwise. This detection is overridden
+ * by the `NG_FORCE_TTY` environment variable. In a CI environment, this will also be `false`
+ * unless `NG_FORCE_TTY` is set.
+ */
 export declare function isTTY(stream?: NodeJS.WriteStream): boolean;

package/src/utilities/tty.js

@@ -8,15 +8,15 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isTTY = isTTY;
-function _isTruthy(value) {
-    // Returns true if value is a string that is anything but 0 or false.
-    return value !== undefined && value !== '0' && value.toUpperCase() !== 'FALSE';
-}
+const environment_options_1 = require("./environment-options");
+/**
+ * Determines if the `stream` is a TTY.
+ *
+ * @param stream A NodeJS stream to check. Defaults to `process.stdout`.
+ * @returns `true` if the `stream` is a TTY, `false` otherwise. This detection is overridden
+ * by the `NG_FORCE_TTY` environment variable. In a CI environment, this will also be `false`
+ * unless `NG_FORCE_TTY` is set.
+ */
 function isTTY(stream = process.stdout) {
-    // If we force TTY, we always return true.
-    const force = process.env['NG_FORCE_TTY'];
-    if (force !== undefined) {
-        return _isTruthy(force);
-    }
-    return !!stream.isTTY && !_isTruthy(process.env['CI']);
+    return environment_options_1.forceTty ?? (!!stream.isTTY && !environment_options_1.isCI);
 }

package/src/utilities/version.js

@@ -22,4 +22,4 @@ class Version {
         this.patch = patch;
     }
 }
-exports.VERSION = new Version('20.2.0-next.1');
+exports.VERSION = new Version('20.2.0-next.3');

package/src/typings.d.ts

@@ -1,15 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
- */
-
-declare module 'npm-pick-manifest' {
-  function pickManifest(
-    metadata: import('./utilities/package-metadata').PackageMetadata,
-    selector: string,
-  ): import('./utilities/package-metadata').PackageManifest;
-  export = pickManifest;
-}

package/src/utilities/load-esm.d.ts

@@ -1,20 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
- */
-/**
- * This uses a dynamic import to load a module which may be ESM.
- * CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
- * will currently, unconditionally downlevel dynamic import into a require call.
- * require calls cannot load ESM code and will result in a runtime error. To workaround
- * this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
- * Once TypeScript provides support for keeping the dynamic import this workaround can
- * be dropped.
- *
- * @param modulePath The path of the module to load.
- * @returns A Promise that resolves to the dynamically imported module.
- */
-export declare function loadEsmModule<T>(modulePath: string | URL): Promise<T>;

package/src/utilities/load-esm.js

@@ -1,30 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadEsmModule = loadEsmModule;
-/**
- * Lazily compiled dynamic import loader function.
- */
-let load;
-/**
- * This uses a dynamic import to load a module which may be ESM.
- * CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
- * will currently, unconditionally downlevel dynamic import into a require call.
- * require calls cannot load ESM code and will result in a runtime error. To workaround
- * this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
- * Once TypeScript provides support for keeping the dynamic import this workaround can
- * be dropped.
- *
- * @param modulePath The path of the module to load.
- * @returns A Promise that resolves to the dynamically imported module.
- */
-function loadEsmModule(modulePath) {
-    load ??= new Function('modulePath', `return import(modulePath);`);
-    return load(modulePath);
-}