angular-architect

用途

Angular Architect 提供企业级 Angular 开发专业知识，专注于 Angular 16+ 特性（Signals、Standalone Components）、RxJS 响应式编程以及大规模 NgRx 状态管理。它用于设计大型 Angular 应用，并进行性能优化和采用现代架构模式。

适用场景包括：

架构大型 Angular 应用（单体仓库 Monorepo、微前端）
实现 Signals 以实现细粒度响应式（Angular 16+）
将遗留的 NgModule 迁移到 Standalone Components
使用 NgRx 或 NgRx Signal Store 设计复杂状态管理
优化性能（Zoneless、OnPush、Hydration）
使用 Nx 或 Turborepo 搭建企业级 CI/CD

主要能力

企业级 Angular 架构

设计大型 Angular 应用架构
实现模块化设计模式（Nx 单体仓库、微前端）
为团队建立编码标准与最佳实践
创建可扩展的目录结构与模块组织

现代 Angular 开发

实现 Signals 细粒度响应式（Angular 16+）
将遗留 NgModule 代码迁移到 Standalone Components
使用 OnPush 与 Zoneless 策略优化变更检测
利用新 Angular 特性（可延迟视图、Hydration）

状态管理

为企业应用设计 NgRx Store 架构
实现 NgRx Signal Store 进行轻量状态管理
为复杂需求创建自定义状态管理方案
使用 TanStack Query 或 RxJS 模式集成服务端状态

性能工程

通过 tree-shaking 与懒加载优化包体积
实现代码分割与差异化加载
创建性能监控与指标收集
为大型 Angular 应用制定优化策略

使用方式

该技能提供决策框架与工作流指导。

状态管理策略决策：根据复杂度选择方案——组件本地状态简单时用 Signals（signal、computed），复杂流用 RxJS（BehaviorSubject）；全局共享状态轻量时用 NgRx Signal Store，企业级复杂场景用 NgRx Store（Redux），实体集合用 NgRx Entity；服务端状态用 TanStack Query（Angular）或 RxJS + Cache Operator。

架构模式选择：Standalone 是 15+ 的默认选择，减少样板代码且可 tree-shaking；Nx Monorepo 适合多应用企业，共享库与受影响构建；微前端适合不同团队/技术栈，独立部署；Zoneless 适合高性能，无 Zone.js 开销但需显式变更检测。

NgRx Signal Store 工作流：定义 Store 时使用 signalStore、withState、withMethods、patchState，例如：

import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';

export const UserStore = signalStore(
  { providedIn: 'root' },
  withState({ users: [], loading: false, query: '' }),
  withMethods((store) => ({
    setQuery(query: string) {
      patchState(store, { query });
    },
    async loadUsers() {
      patchState(store, { loading: true });
      const users = await fetchUsers(store.query());
      patchState(store, { users, loading: false });
    }
  }))
);

在组件中使用：

export class UserListComponent {
  readonly store = inject(UserStore);
  
  constructor() {
    // Auto-load when query changes (Effect)
    effect(() => {
      this.store.loadUsers();
    });
  }
}

Zoneless 应用（Angular 18+）：在 main.ts 中配置：

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

注意：不要手动使用 ApplicationRef.tick()；所有状态使用 signal()；事件会自动触发变更检测。集成方面：RxJS 可用 AsyncPipe 或 toSignal；定时器 setInterval 不会自动触发变更检测，需在定时器内更新 signal。

适用场景

大型电商平台架构：Nx 单体仓库结构，拆分为 apps（storefront、admin、api）与共享库（ui、utilities、data-access）；购物车/用户状态用 NgRx Signal Store，服务端状态用 TanStack Query；可延迟视图、OnPush、懒加载；Module Federation 为未来微前端做准备。
遗留 NgModule 迁移到 Standalone：增量迁移，一次一个功能模块；依赖分析；组件转换；服务重构；结果可减少初始包体积、消除样板代码、提升变更检测性能。
实时仪表盘：Zoneless 引导，基于 Signal 的状态，toSignal 转换 Observable，WebSocket 直接推送更新到 Signals。

限制与注意事项

反模式：

嵌套订阅（回调地狱）：应使用 switchMap 与 AsyncPipe/toSignal。
模板中的逻辑：应使用 computed Signal 或 getter。
共享模块膨胀：应使用 Standalone Components，按需导入。

红旗信号（需升级到性能工程师）：频繁出现 ExpressionChangedAfterItHasBeenCheckedError；初始加载包体积 > 5MB；变更检测周期持续运行（Zone.js 抖动）；RxJS 订阅内存泄漏（忘记 takeUntilDestroyed）。

质量检查清单：架构上，新功能不使用 NgModule，所有功能路由懒加载（loadComponent），本地状态用 Signals、共享状态用 Store；性能上，全面启用 OnPush，初始包 < 200KB，首屏以下重组件使用 @defer；代码质量上，tsconfig 启用 strict: true，使用 AsyncPipe 或 toSignal 而非 .subscribe()，输入验证，无未净化的 innerHTML。

最佳实践：架构设计上为规模而设计、默认 Standalone、懒加载一切、分离关注点、定义边界；状态管理上本地状态用 Signals、全局状态用 Signal Store、服务端状态用 TanStack Query、避免订阅、不可变更新；性能工程上全面 OnPush、延迟加载、优化图片、包分析、策略性预加载；代码质量上严格模式、严格空值检查、文档化 API、集中配置、自动化 lint；测试策略上单元测试用 Jest 或 Vitest、集成测试用 Cypress 或 Playwright、目标 80%+ 覆盖率、组件测试用 Angular Testing Library、每次部署自动化冒烟测试。

技能介绍

用途

主要能力

使用方式

适用场景

限制与注意事项