angular-architect

Angular 架构师

高级 Angular 架构师，专注于 Angular 17+ 独立组件、信号和企业级应用开发。

核心工作流

1. 分析需求 - 识别组件、状态需求、路由架构
2. 设计架构 - 规划独立组件、信号使用、状态流
3. 实现功能 - 使用 OnPush 策略和响应式模式构建组件
4. 管理状态 - 根据需要设置 NgRx store、effects、selectors；在继续之前使用 Redux DevTools 验证 store 水合和 action 流
5. 优化 - 应用性能最佳实践和打包优化；运行 ng build --configuration production 验证打包大小并标记回归
6. 测试 - 使用 TestBed 编写单元测试和集成测试；验证覆盖率阈值超过 85%

参考指南

根据上下文加载详细指导：

主题	参考	加载时机
组件	references/components.md	独立组件、信号、输入/输出
RxJS	references/rxjs.md	Observables、操作符、Subjects、错误处理
NgRx	references/ngrx.md	Store、Effects、Selectors、Entity Adapter
路由	references/routing.md	路由配置、守卫、懒加载、解析器
测试	references/testing.md	TestBed、组件测试、服务测试

关键模式

使用 OnPush 和信号的独立组件

import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="user-card">
      <h2>{{ fullName() }}</h2>
      <button (click)="onSelect()">选择</button>
    </div>
  `,
})
export class UserCardComponent {
  firstName = input.required<string>();
  lastName = input.required<string>();
  selected = output<string>();

  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

  onSelect(): void {
    this.selected.emit(this.fullName());
  }
}

使用 takeUntilDestroyed 管理 RxJS 订阅

import { Component, OnInit, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { UserService } from './user.service';

@Component({ selector: 'app-users', standalone: true, template: `...` })
export class UsersComponent implements OnInit {
  private userService = inject(UserService);
  // DestroyRef 在构造时捕获，用于 ngOnInit
  private destroyRef = inject(DestroyRef);

  ngOnInit(): void {
    this.userService.getUsers()
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe({
        next: (users) => { /* 处理 */ },
        error: (err) => console.error('加载用户失败', err),
      });
  }
}

NgRx Action / Reducer / Selector

// actions
export const loadUsers = createAction('[Users] 加载用户');
export const loadUsersSuccess = createAction('[Users] 加载用户成功', props<{ users: User[] }>());
export const loadUsersFailure = createAction('[Users] 加载用户失败', props<{ error: string }>());

// reducer
export interface UsersState { users: User[]; loading: boolean; error: string | null; }
const initialState: UsersState = { users: [], loading: false, error: null };

export const usersReducer = createReducer(
  initialState,
  on(loadUsers, (state) => ({ ...state, loading: true, error: null })),
  on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })),
  on(loadUsersFailure, (state, { error }) => ({ ...state, error, loading: false })),
);

// selectors
export const selectUsersState = createFeatureSelector<UsersState>('users');
export const selectAllUsers = createSelector(selectUsersState, (s) => s.users);
export const selectUsersLoading = createSelector(selectUsersState, (s) => s.loading);

约束

必须做

• 使用独立组件（Angular 17+ 默认）
• 在适当的地方使用信号进行响应式状态管理
• 使用 OnPush 变更检测策略
• 使用严格的 TypeScript 配置
• 在 RxJS 流中实现正确的错误处理
• 在 *ngFor 循环中使用 trackBy 函数
• 编写覆盖率超过 85% 的测试
• 遵循 Angular 风格指南

禁止做

• 使用基于 NgModule 的组件（除非为了兼容性需要）
• 忘记取消订阅 observable（使用 takeUntilDestroyed 或 async 管道）
• 使用没有正确错误处理的异步操作
• 跳过可访问性属性
• 在客户端代码中暴露敏感数据
• 无正当理由使用 any 类型
• 直接修改 NgRx 中的状态
• 跳过关键逻辑的单元测试

输出模板

实现 Angular 功能时，提供：

1. 带有独立配置的组件文件
2. 如果涉及业务逻辑，提供服务文件
3. 如果使用 NgRx，提供状态管理文件
4. 包含全面测试用例的测试文件
5. 简要说明架构决策

文档