angular-developer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular Developer Guidelines

Angular 开发者指南

When to Activate

激活场景

Working in any Angular project or codebase
Creating or scaffolding a new Angular project, application, or library
Generating components, services, directives, pipes, guards, or resolvers
Implementing reactivity with Angular Signals,
```
linkedSignal
```
, or
```
resource
```
Working with Angular forms (signal forms, reactive forms, or template-driven)
Setting up dependency injection, routing, lazy loading, or route guards
Adding accessibility (ARIA), animations, or component styling
Writing or debugging Angular-specific tests (unit, component harness, E2E)
Configuring Angular CLI tooling or the Angular MCP server

Always analyze the project's Angular version before providing guidance, as best practices and available features can vary significantly between versions. If creating a new project with Angular CLI, do not specify a version unless prompted by the user.
When generating code, follow Angular's style guide and best practices for maintainability and performance. Use the Angular CLI for scaffolding components, services, directives, pipes, and routes to ensure consistency.
Once you finish generating code, run
```
ng build
```
to ensure there are no build errors. If there are errors, analyze the error messages and fix them before proceeding. Do not skip this step, as it is critical for ensuring the generated code is correct and functional.

开发任何Angular项目或代码库时
创建或搭建新的Angular项目、应用或库时
生成组件、服务、指令、管道、守卫或解析器时
使用Angular Signals、
```
linkedSignal
```
或
```
resource
```
实现响应式编程时
处理Angular表单（信号表单、响应式表单或模板驱动表单）时
设置依赖注入、路由、懒加载或路由守卫时
添加可访问性（ARIA）、动画或组件样式时
编写或调试Angular专属测试（单元测试、组件测试工具、端到端测试）时
配置Angular CLI工具或Angular MCP服务器时

在提供指导前，务必先分析项目的Angular版本，因为不同版本之间的最佳实践和可用功能差异很大。如果使用Angular CLI创建新项目，除非用户要求，否则不要指定版本。
生成代码时，遵循Angular风格指南和可维护性、性能相关的最佳实践。使用Angular CLI搭建组件、服务、指令、管道和路由，以确保一致性。
完成代码生成后，运行
```
ng build
```
确保没有构建错误。如果存在错误，分析错误信息并修复后再继续。请勿跳过此步骤，这是确保生成代码正确可用的关键。

Creating New Projects

创建新项目

If no guidelines are provided by the user, use these defaults when creating a new Angular project:

Use the latest stable version of Angular unless the user specifies otherwise.
Prefer Signal Forms for new projects only when the target Angular version supports them. Find out more.

Execution Rules for
ng new
: When asked to create a new Angular project, you must determine the correct execution command by following these strict steps:

Step 1: Check for an explicit user version.

IF the user requests a specific version (e.g., Angular 15), bypass local installations and strictly use
```
npx
```
.

Command:

npx @angular/cli@<requested_version> new <project-name>

Step 2: Check for an existing Angular installation.

IF no specific version is requested, run
```
ng version
```
in the terminal to check if the Angular CLI is already installed on the system.
IF the command succeeds and returns an installed version, use the local/global installation directly.
Command:
```
ng new <project-name>
```

Step 3: Fallback to Latest.

IF no specific version is requested AND the
```
ng version
```
command fails (indicating no Angular installation exists), you must use
```
npx
```
to fetch the latest version.

Command:

npx @angular/cli@latest new <project-name>

如果用户未提供指导原则，创建新Angular项目时使用以下默认规则：

除非用户指定，否则使用Angular的最新稳定版本。
仅当目标Angular版本支持时，新项目优先使用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>

Components

组件

When working with Angular components, consult the following references based on the task:

Fundamentals: Anatomy, metadata, core concepts, and template control flow (@if, @for, @switch). Read components.md
Inputs: Signal-based inputs, transforms, and model inputs. Read inputs.md
Outputs: Signal-based outputs and custom event best practices. Read outputs.md
Host Elements: Host bindings and attribute injection. Read host-elements.md

If you require deeper documentation not found in the references above, read the documentation at

https://angular.dev/guide/components

处理Angular组件时，根据任务参考以下文档：

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

如果需要上述参考文档中未涵盖的更深入内容，请查阅官方文档

https://angular.dev/guide/components

。

Reactivity and Data Management

响应式编程与数据管理

When managing state and data reactivity, use Angular Signals and consult the following references:

Signals Overview: Core signal concepts (
```
signal
```
,
```
computed
```
), reactive contexts, and
```
untracked
```
. Read signals-overview.md
Dependent State (
linkedSignal
): Creating writable state linked to source signals. Read linked-signal.md
Async Reactivity (
resource
): Fetching asynchronous data directly into signal state. Read resource.md
Side Effects (
effect
): Logging, third-party DOM manipulation (
```
afterRenderEffect
```
), and when NOT to use effects. Read effects.md

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

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

Forms

表单

In most cases for new apps, prefer signal forms. When making a forms decision, analyze the project and consider the following guidelines:

If the application version supports Signal Forms and this is a new form, prefer signal forms.
For older applications or existing forms, match the application's current form strategy.
Signal Forms: Use signals for form state management. Read signal-forms.md
Template-driven forms: Use for simple forms. Read template-driven-forms.md
Reactive forms: Use for complex forms. Read reactive-forms.md

对于大多数新应用，优先使用信号表单。决定表单方案时，需分析项目并遵循以下指导原则：

如果应用版本支持Signal Forms且是新表单，优先使用信号表单。
对于旧应用或现有表单，匹配应用当前的表单策略。
Signal Forms：使用信号管理表单状态。阅读signal-forms.md
模板驱动表单：适用于简单表单。阅读template-driven-forms.md
响应式表单：适用于复杂表单。阅读reactive-forms.md

Dependency Injection

依赖注入

When implementing dependency injection in Angular, follow these guidelines:

Fundamentals: Overview of Dependency Injection, services, and the
```
inject()
```
function. Read di-fundamentals.md
Creating and Using Services: Creating services, the
```
providedIn: 'root'
```
option, and injecting into components or other services. Read creating-services.md
Defining Dependency Providers: Automatic vs manual provision,
```
InjectionToken
```
,
```
useClass
```
,
```
useValue
```
,
```
useFactory
```
, and scopes. Read defining-providers.md
Injection Context: Where
```
inject()
```
is allowed,
```
runInInjectionContext
```
, and
```
assertInInjectionContext
```
. Read injection-context.md
Hierarchical Injectors: The
```
EnvironmentInjector
```
vs
```
ElementInjector
```
, resolution rules, modifiers (
```
optional
```
,
```
skipSelf
```
), and
```
providers
```
vs
```
viewProviders
```
. Read hierarchical-injectors.md

在Angular中实现依赖注入时，遵循以下指导原则：

基础内容：依赖注入概述、服务和
```
inject()
```
函数。阅读di-fundamentals.md
创建与使用服务：创建服务、
```
providedIn: 'root'
```
选项以及向组件或其他服务注入。阅读creating-services.md
定义依赖提供者：自动与手动提供、
```
InjectionToken
```
、
```
useClass
```
、
```
useValue
```
、
```
useFactory
```
和作用域。阅读defining-providers.md
注入上下文：
```
inject()
```
允许使用的场景、
```
runInInjectionContext
```
和
```
assertInInjectionContext
```
。阅读injection-context.md
分层注入器：
```
EnvironmentInjector
```
与
```
ElementInjector
```
、解析规则、修饰符（
```
optional
```
、
```
skipSelf
```
）以及
```
providers
```
与
```
viewProviders
```
。阅读hierarchical-injectors.md

Angular Aria

Angular ARIA

When building accessible custom components for any of the following patterns: Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid, consult the following reference:

Angular Aria Components: Building headless, accessible components (Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid) and styling ARIA attributes. Read angular-aria.md

构建以下模式的可访问自定义组件时，参考以下文档：手风琴、列表框、组合框、菜单、标签页、工具栏、树形控件、网格

Angular ARIA组件：构建无头可访问组件（手风琴、列表框、组合框、菜单、标签页、工具栏、树形控件、网格）以及ARIA属性样式。阅读angular-aria.md

Routing

路由

When implementing navigation in Angular, consult the following references:

Define Routes: URL paths, static vs dynamic segments, wildcards, and redirects. Read define-routes.md
Route Loading Strategies: Eager vs lazy loading, and context-aware loading. Read loading-strategies.md
Show Routes with Outlets: Using
```
<router-outlet>
```
, nested outlets, and named outlets. Read show-routes-with-outlets.md
Navigate to Routes: Declarative navigation with
```
RouterLink
```
and programmatic navigation with
```
Router
```
. Read navigate-to-routes.md
Control Route Access with Guards: Implementing
```
CanActivate
```
,
```
CanMatch
```
, and other guards for security. Read route-guards.md
Data Resolvers: Pre-fetching data before route activation with
```
ResolveFn
```
. Read data-resolvers.md
Router Lifecycle and Events: Chronological order of navigation events and debugging. Read router-lifecycle.md
Rendering Strategies: CSR, SSG (Prerendering), and SSR with hydration. Read rendering-strategies.md
Route Transition Animations: Enabling and customizing the View Transitions API. Read route-animations.md

If you require deeper documentation or more context, visit the official Angular Routing guide.

在Angular中实现导航时，参考以下文档：

定义路由：URL路径、静态与动态段、通配符和重定向。阅读define-routes.md
路由加载策略：即时加载与懒加载，以及上下文感知加载。阅读loading-strategies.md
使用路由插座展示路由：使用
```
<router-outlet>
```
、嵌套插座和命名插座。阅读show-routes-with-outlets.md
导航到路由：使用
```
RouterLink
```
的声明式导航和使用
```
Router
```
的编程式导航。阅读navigate-to-routes.md
使用守卫控制路由访问：实现
```
CanActivate
```
、
```
CanMatch
```
等守卫以保障安全。阅读route-guards.md
数据解析器：使用
```
ResolveFn
```
在路由激活前预获取数据。阅读data-resolvers.md
路由生命周期与事件：导航事件的时间顺序和调试。阅读router-lifecycle.md
渲染策略：CSR、SSG（预渲染）和带 hydration 的SSR。阅读rendering-strategies.md
路由过渡动画：启用和自定义View Transitions API。阅读route-animations.md

如果需要更深入的文档或更多上下文，请访问官方Angular路由指南。

Styling and Animations

样式与动画

When implementing styling and animations in Angular, consult the following references:

Using Tailwind CSS with Angular: Integrating Tailwind CSS into Angular projects. Read tailwind-css.md
Angular Animations: Using native CSS (recommended) or the legacy DSL for dynamic effects. Read angular-animations.md
Styling components: Best practices for component styles and encapsulation. Read component-styling.md

在Angular中实现样式与动画时，参考以下文档：

在Angular中使用Tailwind CSS：将Tailwind CSS集成到Angular项目中。阅读tailwind-css.md
Angular动画：使用原生CSS（推荐）或旧版DSL实现动态效果。阅读angular-animations.md
组件样式：组件样式和封装的最佳实践。阅读component-styling.md

Testing

测试

When writing or updating tests, consult the following references based on the task:

Fundamentals: Best practices for unit testing, async patterns, and
```
TestBed
```
. Read testing-fundamentals.md
Component Harnesses: Standard patterns for robust component interaction. Read component-harnesses.md
Router Testing: Using
```
RouterTestingHarness
```
for reliable navigation tests. Read router-testing.md
End-to-End (E2E) Testing: Best practices for E2E tests with Cypress or Playwright. Read e2e-testing.md

编写或更新测试时，根据任务参考以下文档：

基础内容：单元测试、异步模式和
```
TestBed
```
的最佳实践。阅读testing-fundamentals.md
组件测试工具：健壮组件交互的标准模式。阅读component-harnesses.md
路由测试：使用
```
RouterTestingHarness
```
进行可靠的导航测试。阅读router-testing.md
端到端（E2E）测试：使用Cypress或Playwright进行端到端测试的最佳实践。阅读e2e-testing.md

Tooling

工具

When working with Angular tooling, consult the following references:

Angular CLI: Creating applications, generating code (components, routes, services), serving, and building. Read cli.md
Angular MCP Server: Available tools, configuration, and experimental features. Read mcp.md

使用Angular工具时，参考以下文档：

Angular CLI：创建应用、生成代码（组件、路由、服务）、启动服务和构建项目。阅读cli.md
Angular MCP服务器：可用工具、配置和实验性功能。阅读mcp.md

Anti-Patterns

反模式

Using
```
null
```
or
```
undefined
```
as initial signal form field values — use
```
''
```
,
```
0
```
, or
```
[]
```
instead
Accessing form field state flags without calling the field first:
```
form.field.valid()
```
— use
```
form.field().valid()
```
Starting new forms with older form APIs when the target Angular version supports Signal Forms
Setting
```
min
```
,
```
max
```
,
```
value
```
,
```
disabled
```
, or
```
readonly
```
HTML attributes on
```
[formField]
```
inputs — define these as schema rules instead
Calling
```
inject()
```
outside an injection context — use
```
runInInjectionContext
```
when needed
Using
```
effect()
```
for derived state that should use
```
computed()
```
Referencing
```
$parent.$index
```
in nested
```
@for
```
loops — Angular does not support
```
$parent
```
; use
```
let outerIdx = $index
```
instead

将
```
null
```
或
```
undefined
```
作为信号表单字段的初始值——应使用
```
''
```
、
```
0
```
或
```
[]
```
替代
未先调用字段就访问表单字段状态标志：
```
form.field.valid()
```
——应使用
```
form.field().valid()
```
当目标Angular版本支持Signal Forms时，仍使用旧版表单API创建新表单
在
```
[formField]
```
输入上设置
```
min
```
、
```
max
```
、
```
value
```
、
```
disabled
```
或
```
readonly
```
HTML属性——应将这些定义为架构规则
在注入上下文外调用
```
inject()
```
——必要时使用
```
runInInjectionContext
```
使用
```
effect()
```
处理应使用
```
computed()
```
的派生状态
在嵌套
```
@for
```
循环中引用
```
$parent.$index
```
——Angular不支持
```
$parent
```
；应使用
```
let outerIdx = $index
```
替代