---

name: angular-developer description: 生成 Angular 代码并提供架构指导。在创建项目、组件或服务时触发，或用于响应式（signals、linkedSignal、resource）、表单、依赖注入、路由、SSR、无障碍（ARIA）、动画、样式（组件样式、Tailwind CSS）、测试或 CLI 工具的最佳实践。 origin: ECC

Angular 开发者指南

何时激活

• 在任何 Angular 项目或代码库中工作时
• 创建或搭建新的 Angular 项目、应用或库时
• 生成组件、服务、指令、管道、守卫或解析器时
• 使用 Angular Signals、linkedSignal 或 resource 实现响应式时
• 使用 Angular 表单（signal 表单、响应式表单或模板驱动表单）时
• 设置依赖注入、路由、懒加载或路由守卫时
• 添加无障碍（ARIA）、动画或组件样式时
• 编写或调试 Angular 特定测试（单元测试、组件 harness、E2E）时
• 配置 Angular CLI 工具或 Angular MCP 服务器时

1. 在提供指导前始终分析项目的 Angular 版本，因为最佳实践和可用功能在不同版本间可能有显著差异。如果使用 Angular CLI 创建新项目，除非用户提示，否则不要指定版本。

2. 生成代码时，遵循 Angular 的风格指南和最佳实践以确保可维护性和性能。使用 Angular CLI 搭建组件、服务、指令、管道和路由以确保一致性。

3. 完成代码生成后，运行 ng build 确保没有构建错误。如果有错误，分析错误信息并在继续前修复。不要跳过此步骤，因为它对确保生成代码的正确性和功能性至关重要。

创建新项目

如果用户未提供指南，创建新 Angular 项目时使用以下默认值：

1. 除非用户另有指定，使用最新稳定版 Angular。
2. 仅当目标 Angular 版本支持 Signal Forms 时，新项目优先使用 Signal Forms。了解更多。

ng new 的执行规则： 当被要求创建新 Angular 项目时，必须按以下严格步骤确定正确的执行命令：

步骤 1：检查用户是否明确指定版本。

• 如果用户请求特定版本（如 Angular 15），绕过本地安装并严格使用 npx。
• 命令： npx @angular/cli@<requested_version> new <project-name>

步骤 2：检查现有 Angular 安装。

• 如果未请求特定版本，在终端运行 ng version 检查系统是否已安装 Angular CLI。
• 如果命令成功并返回已安装版本，直接使用本地/全局安装。
• 命令： ng new <project-name>

步骤 3：回退到最新版本。

• 如果未请求特定版本且 ng version 命令失败（表示没有 Angular 安装），必须使用 npx 获取最新版本。
• 命令： npx @angular/cli@latest new <project-name>

组件

使用 Angular 组件时，根据任务查阅以下参考：

• 基础：结构、元数据、核心概念和模板控制流（@if、@for、@switch）。阅读 components.md
• 输入：基于 Signal 的输入、转换和模型输入。阅读 inputs.md
• 输出：基于 Signal 的输出和自定义事件最佳实践。阅读 outputs.md
• 宿主元素：宿主绑定和属性注入。阅读 host-elements.md

如果在上述参考中找不到更深入的文档，请阅读 https://angular.dev/guide/components 的文档。

响应式和数据管理

管理状态和数据响应式时，使用 Angular Signals 并查阅以下参考：

• Signals 概述：核心 signal 概念（signal、computed）、响应式上下文和 untracked。阅读 signals-overview.md
• 依赖状态（linkedSignal）：创建链接到源 signal 的可写状态。阅读 linked-signal.md
• 异步响应式（resource）：将异步数据直接获取到 signal 状态中。阅读 resource.md
• 副作用（effect）：日志记录、第三方 DOM 操作（afterRenderEffect）以及何时不使用 effects。阅读 effects.md

表单

大多数新应用场景下，优先使用 signal 表单。做表单决策时，分析项目并考虑以下指南：

• 如果应用版本支持 Signal Forms 且这是新表单，优先使用 signal 表单。

• 对于旧应用或现有表单，匹配应用当前的表单策略。

• Signal Forms：用于新项目（当目标版本支持时）。