@angular/cli 20.1.0 → 20.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/cli",
-  "version": "20.1.0",
+  "version": "20.1.2",
   "description": "CLI tool for Angular",
   "main": "lib/cli/index.js",
   "bin": {
@@ -25,14 +25,15 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "dependencies": {
-    "@angular-devkit/architect": "0.2001.0",
-    "@angular-devkit/core": "20.1.0",
-    "@angular-devkit/schematics": "20.1.0",
+    "@angular-devkit/architect": "0.2001.2",
+    "@angular-devkit/core": "20.1.2",
+    "@angular-devkit/schematics": "20.1.2",
     "@inquirer/prompts": "7.6.0",
     "@listr2/prompt-adapter-inquirer": "2.0.22",
     "@modelcontextprotocol/sdk": "1.13.3",
-    "@schematics/angular": "20.1.0",
+    "@schematics/angular": "20.1.2",
     "@yarnpkg/lockfile": "1.1.0",
+    "algoliasearch": "5.32.0",
     "ini": "5.0.0",
     "jsonc-parser": "3.3.1",
     "listr2": "8.3.3",
@@ -47,14 +48,14 @@
   "ng-update": {
     "migrations": "@schematics/angular/migrations/migration-collection.json",
     "packageGroup": {
-      "@angular/cli": "20.1.0",
-      "@angular/build": "20.1.0",
-      "@angular/ssr": "20.1.0",
-      "@angular-devkit/architect": "0.2001.0",
-      "@angular-devkit/build-angular": "20.1.0",
-      "@angular-devkit/build-webpack": "0.2001.0",
-      "@angular-devkit/core": "20.1.0",
-      "@angular-devkit/schematics": "20.1.0"
+      "@angular/cli": "20.1.2",
+      "@angular/build": "20.1.2",
+      "@angular/ssr": "20.1.2",
+      "@angular-devkit/architect": "0.2001.2",
+      "@angular-devkit/build-angular": "20.1.2",
+      "@angular-devkit/build-webpack": "0.2001.2",
+      "@angular-devkit/core": "20.1.2",
+      "@angular-devkit/schematics": "20.1.2"
     }
   },
   "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/commands/mcp/constants.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @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
+ */
+export declare const k1 = "@angular/cli";
+export declare const at = "QBHBbOdEO4CmBOC2d7jNmg==";
+export declare const iv: Buffer<ArrayBuffer>;

package/src/commands/mcp/constants.js

@@ -0,0 +1,15 @@
+"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.iv = exports.at = exports.k1 = void 0;
+exports.k1 = '@angular/cli';
+exports.at = 'QBHBbOdEO4CmBOC2d7jNmg==';
+exports.iv = Buffer.from([
+    0x97, 0xf4, 0x62, 0x95, 0x3e, 0x12, 0x76, 0x84, 0x8a, 0x09, 0x4a, 0xc9, 0xeb, 0xa2, 0x84, 0x69,
+]);

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

@@ -14,8 +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',
@@ -36,71 +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.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @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 a tool with the MCP server to search the Angular documentation.
+ *
+ * This tool uses Algolia to search the official Angular documentation.
+ *
+ * @param server The MCP server instance with which to register the tool.
+ */
+export declare function registerDocSearchTool(server: McpServer): Promise<void>;

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

@@ -0,0 +1,209 @@
+"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.registerDocSearchTool = registerDocSearchTool;
+const node_crypto_1 = require("node:crypto");
+const zod_1 = require("zod");
+const constants_1 = require("../constants");
+const ALGOLIA_APP_ID = 'L1XWT2UJ7F';
+// https://www.algolia.com/doc/guides/security/api-keys/#search-only-api-key
+// This is a search only, rate limited key. It is sent within the URL of the query request.
+// This is not the actual key.
+const ALGOLIA_API_E = '322d89dab5f2080fe09b795c93413c6a89222b13a447cdf3e6486d692717bc0c';
+/**
+ * Registers a tool with the MCP server to search the Angular documentation.
+ *
+ * This tool uses Algolia to search the official Angular documentation.
+ *
+ * @param server The MCP server instance with which to register the tool.
+ */
+async function registerDocSearchTool(server) {
+    let client;
+    server.registerTool('search_documentation', {
+        title: 'Search Angular Documentation (angular.dev)',
+        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('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, 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));
+        const allHits = results.flatMap((result) => result.hits);
+        if (allHits.length === 0) {
+            return {
+                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.
+ *
+ * The arguments are based on the search implementation in `adev`.
+ *
+ * @param query The search query string.
+ * @returns The search arguments for the Algolia client.
+ */
+function createSearchArguments(query) {
+    // Search arguments are based on adev's search service:
+    // https://github.com/angular/angular/blob/4b614fbb3263d344dbb1b18fff24cb09c5a7582d/adev/shared-docs/services/search.service.ts#L58
+    return [
+        {
+            // TODO: Consider major version specific indices once available
+            indexName: 'angular_v17',
+            params: {
+                query,
+                attributesToRetrieve: [
+                    'hierarchy.lvl0',
+                    'hierarchy.lvl1',
+                    'hierarchy.lvl2',
+                    'hierarchy.lvl3',
+                    'hierarchy.lvl4',
+                    'hierarchy.lvl5',
+                    'hierarchy.lvl6',
+                    'content',
+                    'type',
+                    'url',
+                ],
+                hitsPerPage: 10,
+            },
+            type: 'default',
+        },
+    ];
+}

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.1.0');
+exports.VERSION = new Version('20.1.2');

package/src/commands/mcp/component-generation-prompt.md

@@ -1,60 +0,0 @@
-# Angular Component Generation Prompt
-
-## Role and Goal
-
-You are an expert Angular developer specializing in creating modern, high-quality components. Your goal is to generate a new Angular component based on user requirements, ensuring it follows the latest best practices and style guidelines.
-
-## Context
-
-You are operating within an existing Angular CLI project. You have access to the project's file system and can use tools to interact with the Angular CLI for code generation.
-
-## Instructions
-
-Follow these steps to fulfill the user's request:
-
-### 1. Analyze the User's Request
-
-Carefully analyze the user's instructions to extract the following details:
-
--   **Component Name:** The desired name for the component (e.g., 'UserProfile', 'LoginFormComponent'). Use this to form the file name and selector.
--   **Inputs/Outputs:** Any `input()` or `output()` properties the component needs.
--   **Component Logic:** The business logic, properties, and methods to be implemented in the component's class.
--   **Template Structure:** The HTML structure for the component's template.
--   **Styling:** Any CSS styles or style requirements for the component.
--   **CLI Options:** Any specific options for the `ng generate` command, such as `--style=scss`, `--skip-tests=true`, `--view-encapsulation=Emulated`, etc.
-
-### 2. Generate the Base Component
-
-You MUST generate the initial component files using the Angular CLI. Use the following methods in order of preference:
-
-**Preference 1: Use the `generate_component` tool (if available)**
-
--   This is the preferred method.
--   Use the details extracted from the user's request to provide the necessary parameters.
--   Always generate a **standalone** component unless explicitly told otherwise.
-
-**Preference 2: Use the `run_shell_command` tool**
-
--   If a dedicated `generate_component` tool is not available, fall back to using the shell command.
--   Construct the command like this: `ng generate component <component-name> [options...]`
--   **Default Options:** Always include `--standalone` to create a standalone component.
--   **User-Defined Options:** Add any other options derived from the user's request.
-
-### 3. Read the Generated Files
-
-After the CLI has generated the base files, use the `read_file` tool to get the content of the newly created:
--   Component TypeScript file (`<component-name>.component.ts`)
--   Component template file (`<component-name>.component.html`)
--   Component stylesheet (`<component-name>.component.css`, etc.)
-
-### 4. Modify the Code
-
-Modify the code from the generated files to implement the specific logic, template, and styling from the user's instructions. Ensure the final code is complete, correct, and adheres to the latest Angular best practices.
-
--   **Class:** Add the required properties, `input()`/`output()` functions, methods, and other logic to the component's class.
--   **Template:** Build the HTML structure in the template file. Use native control flow (`@if`, `@for`, `@switch`) instead of structural directives (`*ngIf`, `*ngFor`).
--   **Stylesheet:** Add the necessary styles to the stylesheet.
-
-### 5. Final Output
-
-Present the complete, final code for each modified file. Do not show diffs or partial code snippets. The user should be able to copy and paste the code directly into their project.