用途
Angular Architect 是一个面向 Angular 17+ 的资深 Angular 架构技能,主要用于企业级 Angular 应用的开发与架构设计。它强调使用独立组件(standalone components)、signals 和标准化的工程约束来构建应用。
核心工作流
技能按照以下流程工作:
- 分析需求——识别组件、状态需求与路由架构。
- 设计架构——规划独立组件、signal 使用方式与状态流转。
- 实现功能——使用 OnPush 策略和响应式模式构建组件。
- 管理状态——按需设置 NgRx store、effects、selectors;在继续之前使用 Redux DevTools 验证 store hydration 和 action 流。
- 优化——应用性能最佳实践与打包优化;运行
ng build --configuration production验证包体积并标记回退。 - 测试——使用 TestBed 编写单元测试与集成测试;验证达到 >85% 覆盖率阈值。
主要能力
- 生成 Angular 17+ 独立组件。
- 配置带有懒加载和守卫的高级路由。
- 实现 NgRx 状态管理。
- 应用 RxJS 模式。
- 使用 OnPush 变更检测策略与响应式模式。
- 提供按主题加载的参考指南,覆盖组件、RxJS、NgRx、路由、测试。
使用方式
技能根据上下文加载对应参考指南:
| 主题 | 参考文件 | 加载时机 |
|---|---|---|
| Components | references/components.md | 独立组件、signals、input/output |
| RxJS | references/rxjs.md | Observables、操作符、subjects、错误处理 |
| NgRx | references/ngrx.md | Store、effects、selectors、entity adapter |
| Routing | references/routing.md | Router 配置、守卫、懒加载、resolvers |
| Testing | references/testing.md | TestBed、组件测试、服务测试 |
技能包含的关键代码模式示例:
- 使用 OnPush 和 Signals 的独立组件:通过
input.required、output、computed等定义组件输入输出与派生值。 - 使用
takeUntilDestroyed的 RxJS 订阅管理:在构造时捕获DestroyRef,并在ngOnInit中使用。 - NgRx Action / Reducer / Selector:使用
createAction、createReducer、createFeatureSelector、createSelector定义状态管理。
约束
必须遵循:
- 使用独立组件(Angular 17+ 默认)。
- 在合适场景使用 signals 进行响应式状态管理。
- 使用 OnPush 变更检测策略。
- 使用严格的 TypeScript 配置。
- 在 RxJS 流中实现正确的错误处理。
- 在
*ngFor循环中使用 trackBy 函数。 - 编写测试并达到 >85% 覆盖率。
- 遵循 Angular 风格指南。
禁止:
- 使用基于 NgModule 的组件(兼容性要求除外)。
- 忘记取消订阅 observables(使用
takeUntilDestroyed或 async pipe)。 - 使用没有适当错误处理的异步操作。
- 跳过无障碍属性。
- 在客户端代码中暴露敏感数据。
- 在没有正当理由的情况下使用 any 类型。
- 在 NgRx 中直接变更 state。
- 对关键逻辑跳过单元测试。
输出模板
实现 Angular 功能时提供:
- 带有独立配置的组件文件。
- 涉及业务逻辑时的服务文件。
- 使用 NgRx 时的状态管理文件。
- 包含全面测试用例的测试文件。
- 架构决策的简要说明。
适用场景与限制
适用于使用 Angular 17+ 进行企业级应用开发的场景,尤其是需要独立组件、signals、NgRx 状态管理、高级路由与严格测试覆盖率的项目。其约束明确禁止在非兼容性需求下使用 NgModule 组件、直接变更 NgRx state 以及滥用 any 类型。关于平台支持、收费与价格等具体信息暂未提供。