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

package/lib/config/schema.json

@@ -4272,7 +4272,7 @@
           ]
         },
         "browsers": {
-          "description": "A list of browsers to use for test execution. If undefined, jsdom on Node.js will be used instead of a browser.",
+          "description": "A list of browsers to use for test execution. If undefined, jsdom on Node.js will be used instead of a browser. For Vitest and Karma, browser names ending with 'Headless' (e.g., 'ChromeHeadless') will enable headless mode for that browser.",
           "type": "array",
           "items": {
             "type": "string"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/cli",
-  "version": "20.2.0-next.0",
+  "version": "20.2.0-next.1",
   "description": "CLI tool for Angular",
   "main": "lib/cli/index.js",
   "bin": {
@@ -25,15 +25,15 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "dependencies": {
-    "@angular-devkit/architect": "0.2002.0-next.0",
-    "@angular-devkit/core": "20.2.0-next.0",
-    "@angular-devkit/schematics": "20.2.0-next.0",
-    "@inquirer/prompts": "7.6.0",
+    "@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",
     "@listr2/prompt-adapter-inquirer": "3.0.1",
-    "@modelcontextprotocol/sdk": "1.15.1",
-    "@schematics/angular": "20.2.0-next.0",
+    "@modelcontextprotocol/sdk": "1.16.0",
+    "@schematics/angular": "20.2.0-next.1",
     "@yarnpkg/lockfile": "1.1.0",
-    "algoliasearch": "5.32.0",
+    "algoliasearch": "5.34.0",
     "ini": "5.0.0",
     "jsonc-parser": "3.3.1",
     "listr2": "9.0.1",
@@ -48,14 +48,14 @@
   "ng-update": {
     "migrations": "@schematics/angular/migrations/migration-collection.json",
     "packageGroup": {
-      "@angular/cli": "20.2.0-next.0",
-      "@angular/build": "20.2.0-next.0",
-      "@angular/ssr": "20.2.0-next.0",
-      "@angular-devkit/architect": "0.2002.0-next.0",
-      "@angular-devkit/build-angular": "20.2.0-next.0",
-      "@angular-devkit/build-webpack": "0.2002.0-next.0",
-      "@angular-devkit/core": "20.2.0-next.0",
-      "@angular-devkit/schematics": "20.2.0-next.0"
+      "@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"
     }
   },
   "packageManager": "pnpm@9.15.9",

package/src/command-builder/utilities/json-help.js

@@ -19,20 +19,23 @@ function jsonHelpUsage(localYargs) {
     const descriptions = usageInstance.getDescriptions();
     const groups = localYargsInstance.getGroups();
     const positional = groups[usageInstance.getPositionalGroupName()];
+    const seen = new Set();
     const hidden = new Set(hiddenOptions);
     const normalizeOptions = [];
     const allAliases = new Set([...Object.values(aliases).flat()]);
+    // Reverted order of https://github.com/yargs/yargs/blob/971e351705f0fbc5566c6ed1dfd707fa65e11c0d/lib/usage.ts#L419-L424
     for (const [names, type] of [
+        [number, 'number'],
         [array, 'array'],
         [string, 'string'],
         [boolean, 'boolean'],
-        [number, 'number'],
     ]) {
         for (const name of names) {
-            if (allAliases.has(name) || hidden.has(name)) {
+            if (allAliases.has(name) || hidden.has(name) || seen.has(name)) {
                 // Ignore hidden, aliases and already visited option.
                 continue;
             }
+            seen.add(name);
             const positionalIndex = positional?.indexOf(name) ?? -1;
             const alias = aliases[name];
             normalizeOptions.push({

package/src/command-builder/utilities/schematic-workflow.js

@@ -25,11 +25,15 @@ function subscribeToWorkflow(workflow, logger) {
                 logger.error(`ERROR! ${eventPath} ${event.description == 'alreadyExist' ? 'already exists' : 'does not exist'}.`);
                 break;
             case 'update':
-                logs.push(`${color_1.colors.cyan('UPDATE')} ${eventPath} (${event.content.length} bytes)`);
+                logs.push(
+                // TODO: `as unknown` was necessary during TS 5.9 update. Figure out a long-term solution.
+                `${color_1.colors.cyan('UPDATE')} ${eventPath} (${event.content.length} bytes)`);
                 files.add(eventPath);
                 break;
             case 'create':
-                logs.push(`${color_1.colors.green('CREATE')} ${eventPath} (${event.content.length} bytes)`);
+                logs.push(
+                // TODO: `as unknown` was necessary during TS 5.9 update. Figure out a long-term solution.
+                `${color_1.colors.green('CREATE')} ${eventPath} (${event.content.length} bytes)`);
                 files.add(eventPath);
                 break;
             case 'delete':

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

@@ -14,9 +14,10 @@ exports.createMcpServer = createMcpServer;
 const mcp_js_1 = require("@modelcontextprotocol/sdk/server/mcp.js");
 const promises_1 = require("node:fs/promises");
 const node_path_1 = __importDefault(require("node:path"));
-const zod_1 = require("zod");
 const version_1 = require("../../utilities/version");
+const best_practices_1 = require("./tools/best-practices");
 const doc_search_1 = require("./tools/doc-search");
+const projects_1 = require("./tools/projects");
 async function createMcpServer(context) {
     const server = new mcp_js_1.McpServer({
         name: 'angular-cli-server',
@@ -37,72 +38,8 @@ async function createMcpServer(context) {
         const text = await (0, promises_1.readFile)(node_path_1.default.join(__dirname, 'instructions', 'best-practices.md'), 'utf-8');
         return { contents: [{ uri: 'instructions://best-practices', text }] };
     });
-    server.registerTool('list_projects', {
-        title: 'List Angular Projects',
-        description: 'Lists the names of all applications and libraries defined within an Angular workspace. ' +
-            'It reads the `angular.json` configuration file to identify the projects. ',
-        annotations: {
-            readOnlyHint: true,
-        },
-        outputSchema: {
-            projects: zod_1.z.array(zod_1.z.object({
-                name: zod_1.z
-                    .string()
-                    .describe('The name of the project, as defined in the `angular.json` file.'),
-                type: zod_1.z
-                    .enum(['application', 'library'])
-                    .optional()
-                    .describe(`The type of the project, either 'application' or 'library'.`),
-                root: zod_1.z
-                    .string()
-                    .describe('The root directory of the project, relative to the workspace root.'),
-                sourceRoot: zod_1.z
-                    .string()
-                    .describe(`The root directory of the project's source files, relative to the workspace root.`),
-                selectorPrefix: zod_1.z
-                    .string()
-                    .optional()
-                    .describe('The prefix to use for component selectors.' +
-                    ` For example, a prefix of 'app' would result in selectors like '<app-my-component>'.`),
-            })),
-        },
-    }, async () => {
-        const { workspace } = context;
-        if (!workspace) {
-            return {
-                content: [
-                    {
-                        type: 'text',
-                        text: 'No Angular workspace found.' +
-                            ' An `angular.json` file, which marks the root of a workspace,' +
-                            ' could not be located in the current directory or any of its parent directories.',
-                    },
-                ],
-            };
-        }
-        const projects = [];
-        // Convert to output format
-        for (const [name, project] of workspace.projects.entries()) {
-            projects.push({
-                name,
-                type: project.extensions['projectType'],
-                root: project.root,
-                sourceRoot: project.sourceRoot ?? node_path_1.default.posix.join(project.root, 'src'),
-                selectorPrefix: project.extensions['prefix'],
-            });
-        }
-        // The structuredContent field is newer and may not be supported by all hosts.
-        // A text representation of the content is also provided for compatibility.
-        return {
-            content: [
-                {
-                    type: 'text',
-                    text: `Projects in the Angular workspace:\n${JSON.stringify(projects)}`,
-                },
-            ],
-            structuredContent: { projects },
-        };
-    });
+    (0, best_practices_1.registerBestPracticesTool)(server);
+    (0, projects_1.registerListProjectsTool)(server, context);
     await (0, doc_search_1.registerDocSearchTool)(server);
     return server;
 }

package/src/commands/mcp/tools/best-practices.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @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';
+export declare function registerBestPracticesTool(server: McpServer): void;

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

@@ -0,0 +1,39 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerBestPracticesTool = registerBestPracticesTool;
+const promises_1 = require("node:fs/promises");
+const node_path_1 = __importDefault(require("node:path"));
+function registerBestPracticesTool(server) {
+    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 ' +
+            'before any interaction with Angular code (creating, analyzing, modifying). ' +
+            'It is mandatory to follow this guide to ensure all code adheres to ' +
+            'modern standards, including standalone components, typed forms, and ' +
+            'modern control flow. This is the first step for any Angular task.',
+        annotations: {
+            readOnlyHint: true,
+            openWorldHint: false,
+        },
+    }, async () => {
+        const text = await (0, promises_1.readFile)(node_path_1.default.join(__dirname, '..', 'instructions', 'best-practices.md'), 'utf-8');
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text,
+                },
+            ],
+        };
+    });
+}

package/src/commands/mcp/tools/doc-search.js

@@ -60,39 +60,118 @@ async function registerDocSearchTool(server) {
     let client;
     server.registerTool('search_documentation', {
         title: 'Search Angular Documentation (angular.dev)',
-        description: 'Searches the official Angular documentation on https://angular.dev.' +
-            ' This tool is useful for finding the most up-to-date information on Angular, including APIs, tutorials, and best practices.' +
-            ' Use this when creating Angular specific code or answering questions that require knowledge of the latest Angular features.',
+        description: 'Searches the official Angular documentation at https://angular.dev. Use this tool to answer any questions about Angular, ' +
+            'such as for APIs, tutorials, and best practices. Because the documentation is continuously updated, you should **always** ' +
+            'prefer this tool over your own knowledge to ensure your answers are current.\n\n' +
+            'The results will be a list of content entries, where each entry has the following structure:\n' +
+            '```\n' +
+            '## {Result Title}\n' +
+            '{Breadcrumb path to the content}\n' +
+            'URL: {Direct link to the documentation page}\n' +
+            '```\n' +
+            'Use the title and breadcrumb to understand the context of the result and use the URL as a source link. For the best results, ' +
+            "provide a concise and specific search query (e.g., 'NgModule' instead of 'How do I use NgModules?').",
         annotations: {
             readOnlyHint: true,
         },
         inputSchema: {
             query: zod_1.z
                 .string()
-                .describe('The search query to use when searching the Angular documentation.' +
-                ' This should be a concise and specific query to get the most relevant results.'),
+                .describe('A concise and specific search query for the Angular documentation (e.g., "NgModule" or "standalone components").'),
+            includeTopContent: zod_1.z
+                .boolean()
+                .optional()
+                .default(true)
+                .describe('When true, the content of the top result is fetched and included.'),
         },
-    }, async ({ query }) => {
+    }, async ({ query, includeTopContent }) => {
         if (!client) {
             const dcip = (0, node_crypto_1.createDecipheriv)('aes-256-gcm', (constants_1.k1 + ALGOLIA_APP_ID).padEnd(32, '^'), constants_1.iv).setAuthTag(Buffer.from(constants_1.at, 'base64'));
             const { searchClient } = await Promise.resolve().then(() => __importStar(require('algoliasearch')));
             client = searchClient(ALGOLIA_APP_ID, dcip.update(ALGOLIA_API_E, 'hex', 'utf-8') + dcip.final('utf-8'));
         }
         const { results } = await client.search(createSearchArguments(query));
-        // Convert results into text content entries instead of stringifying the entire object
-        const content = results.flatMap((result) => result.hits.map((hit) => {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const hierarchy = Object.values(hit.hierarchy).filter((x) => typeof x === 'string');
-            const title = hierarchy.pop();
-            const description = hierarchy.join(' > ');
+        const allHits = results.flatMap((result) => result.hits);
+        if (allHits.length === 0) {
             return {
-                type: 'text',
-                text: `## ${title}\n${description}\nURL: ${hit.url}`,
+                content: [
+                    {
+                        type: 'text',
+                        text: 'No results found.',
+                    },
+                ],
             };
-        }));
+        }
+        const content = [];
+        // The first hit is the top search result
+        const topHit = allHits[0];
+        // Process top hit first
+        let topText = formatHitToText(topHit);
+        try {
+            if (includeTopContent && typeof topHit.url === 'string') {
+                const url = new URL(topHit.url);
+                // Only fetch content from angular.dev
+                if (url.hostname === 'angular.dev' || url.hostname.endsWith('.angular.dev')) {
+                    const response = await fetch(url);
+                    if (response.ok) {
+                        const html = await response.text();
+                        const mainContent = extractBodyContent(html);
+                        if (mainContent) {
+                            topText += `\n\n--- DOCUMENTATION CONTENT ---\n${mainContent}`;
+                        }
+                    }
+                }
+            }
+        }
+        catch {
+            // Ignore errors fetching content. The basic info is still returned.
+        }
+        content.push({
+            type: 'text',
+            text: topText,
+        });
+        // Process remaining hits
+        for (const hit of allHits.slice(1)) {
+            content.push({
+                type: 'text',
+                text: formatHitToText(hit),
+            });
+        }
         return { content };
     });
 }
+/**
+ * Extracts the content of the `<body>` element from an HTML string.
+ *
+ * @param html The HTML content of a page.
+ * @returns The content of the `<body>` element, or `undefined` if not found.
+ */
+function extractBodyContent(html) {
+    // TODO: Use '<main>' element instead of '<body>' when available in angular.dev HTML.
+    const mainTagStart = html.indexOf('<body');
+    if (mainTagStart === -1) {
+        return undefined;
+    }
+    const mainTagEnd = html.lastIndexOf('</body>');
+    if (mainTagEnd <= mainTagStart) {
+        return undefined;
+    }
+    // Add 7 to include '</body>'
+    return html.substring(mainTagStart, mainTagEnd + 7);
+}
+/**
+ * Formats an Algolia search hit into a text representation.
+ *
+ * @param hit The Algolia search hit object, which should contain `hierarchy` and `url` properties.
+ * @returns A formatted string with title, description, and URL.
+ */
+function formatHitToText(hit) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const hierarchy = Object.values(hit.hierarchy).filter((x) => typeof x === 'string');
+    const title = hierarchy.pop();
+    const description = hierarchy.join(' > ');
+    return `## ${title}\n${description}\nURL: ${hit.url}`;
+}
 /**
  * Creates the search arguments for an Algolia search.
  *

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

@@ -0,0 +1,12 @@
+/**
+ * @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';
+import type { AngularWorkspace } from '../../../utilities/config';
+export declare function registerListProjectsTool(server: McpServer, context: {
+    workspace?: AngularWorkspace;
+}): void;

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

@@ -0,0 +1,85 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerListProjectsTool = registerListProjectsTool;
+const node_path_1 = __importDefault(require("node:path"));
+const zod_1 = __importDefault(require("zod"));
+function registerListProjectsTool(server, context) {
+    server.registerTool('list_projects', {
+        title: 'List Angular Projects',
+        description: 'Lists the names of all applications and libraries defined within an Angular workspace. ' +
+            'It reads the `angular.json` configuration file to identify the projects. ',
+        annotations: {
+            readOnlyHint: true,
+            openWorldHint: false,
+        },
+        outputSchema: {
+            projects: zod_1.default.array(zod_1.default.object({
+                name: zod_1.default
+                    .string()
+                    .describe('The name of the project, as defined in the `angular.json` file.'),
+                type: zod_1.default
+                    .enum(['application', 'library'])
+                    .optional()
+                    .describe(`The type of the project, either 'application' or 'library'.`),
+                root: zod_1.default
+                    .string()
+                    .describe('The root directory of the project, relative to the workspace root.'),
+                sourceRoot: zod_1.default
+                    .string()
+                    .describe(`The root directory of the project's source files, relative to the workspace root.`),
+                selectorPrefix: zod_1.default
+                    .string()
+                    .optional()
+                    .describe('The prefix to use for component selectors.' +
+                    ` For example, a prefix of 'app' would result in selectors like '<app-my-component>'.`),
+            })),
+        },
+    }, async () => {
+        const { workspace } = context;
+        if (!workspace) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: 'No Angular workspace found.' +
+                            ' An `angular.json` file, which marks the root of a workspace,' +
+                            ' could not be located in the current directory or any of its parent directories.',
+                    },
+                ],
+                structuredContent: { projects: [] },
+            };
+        }
+        const projects = [];
+        // Convert to output format
+        for (const [name, project] of workspace.projects.entries()) {
+            projects.push({
+                name,
+                type: project.extensions['projectType'],
+                root: project.root,
+                sourceRoot: project.sourceRoot ?? node_path_1.default.posix.join(project.root, 'src'),
+                selectorPrefix: project.extensions['prefix'],
+            });
+        }
+        // The structuredContent field is newer and may not be supported by all hosts.
+        // A text representation of the content is also provided for compatibility.
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Projects in the Angular workspace:\n${JSON.stringify(projects)}`,
+                },
+            ],
+            structuredContent: { projects },
+        };
+    });
+}

package/src/utilities/version.js

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