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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/cli",
-  "version": "20.2.0-next.1",
+  "version": "20.2.0-next.2",
   "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",
+    "@angular-devkit/architect": "0.2002.0-next.2",
+    "@angular-devkit/core": "20.2.0-next.2",
+    "@angular-devkit/schematics": "20.2.0-next.2",
     "@inquirer/prompts": "7.7.1",
     "@listr2/prompt-adapter-inquirer": "3.0.1",
-    "@modelcontextprotocol/sdk": "1.16.0",
-    "@schematics/angular": "20.2.0-next.1",
+    "@modelcontextprotocol/sdk": "1.17.0",
+    "@schematics/angular": "20.2.0-next.2",
     "@yarnpkg/lockfile": "1.1.0",
-    "algoliasearch": "5.34.0",
+    "algoliasearch": "5.34.1",
     "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.2",
+      "@angular/build": "20.2.0-next.2",
+      "@angular/ssr": "20.2.0-next.2",
+      "@angular-devkit/architect": "0.2002.0-next.2",
+      "@angular-devkit/build-angular": "20.2.0-next.2",
+      "@angular-devkit/build-webpack": "0.2002.0-next.2",
+      "@angular-devkit/core": "20.2.0-next.2",
+      "@angular-devkit/schematics": "20.2.0-next.2"
     }
   },
   "packageManager": "pnpm@9.15.9",

package/src/commands/mcp/cli.js

@@ -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,8 +17,9 @@ 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,
@@ -39,7 +40,22 @@ 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.
+    // Currently only the `list_projects` tool.
+    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 {
+            (0, examples_1.registerFindExampleTool)(server, node_path_1.default.join(__dirname, '../../../lib/code-examples.db'));
+        }
+    }
     return server;
 }

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): 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,190 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerFindExampleTool = registerFindExampleTool;
+exports.escapeSearchQuery = escapeSearchQuery;
+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.
+ */
+function registerFindExampleTool(server, exampleDatabasePath) {
+    let db;
+    let queryStatement;
+    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 || !queryStatement) {
+            suppressSqliteWarning();
+            const { DatabaseSync } = await Promise.resolve().then(() => __importStar(require('node:sqlite')));
+            db = new DatabaseSync(exampleDatabasePath, { readOnly: true });
+            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);
+    };
+}

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/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.2');

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;
-}