用 Angular 17+ 独立组件、Signals…

在开发 Angular 17+ 企业级应用时，提供从组件设计、状态管理、路由、性能优化到测试的完整架构与实现规范。

适用场景

解决思路

1. 分析需求：识别组件、状态需求与路由架构
2. 设计架构：规划独立组件、signal 使用方式与状态流转
3. 实现功能：用 OnPush 策略与响应式模式构建组件
4. 管理状态：按需搭建 NgRx store、effects、selectors；在继续之前用 Redux DevTools 验证 store hydration 与 action 流
5. 优化：应用性能最佳实践与打包优化；运行 `ng build --configuration production` 验证包体积并标记回归
6. 测试：用 TestBed 编写单元与集成测试；验证覆盖率达到 >85% 阈值
7. 按上下文加载详细参考：组件参考 `references/components.md`（独立组件、signals、input/output）、RxJS 参考 `references/rxjs.md`（Observables、操作符、subjects、错误处理）、NgRx 参考 `references/ngrx.md`（Store、effects、selectors、entity adapter）、路由参考 `references/routing.md`（Router 配置、guards、懒加载、resolvers）、测试参考 `references/testing.md`（TestBed、组件测试、服务测试）
8. 独立组件模式：使用 `standalone: true`、`ChangeDetectionStrategy.OnPush`、`input.required()`、`output()` 与 `computed()` 构建组件
9. RxJS 订阅管理：在构造函数中注入 `DestroyRef`，在 `ngOnInit` 中用 `takeUntilDestroyed(this.destroyRef)` 管道管理订阅，并在 subscribe 中提供 next 与 error 处理
10. NgRx 模式：用 `createAction` 定义 loadUsers/loadUsersSuccess/loadUsersFailure，用 `createReducer` 与 `on` 处理 loading/error 状态，用 `createFeatureSelector` 与 `createSelector` 创建 selectors
11. 必须使用独立组件（Angular 17+ 默认）
12. 在合适场景# 用 signals 管理响应式状态
13. 使用 OnPush 变更检测策略
14. 使用严格 TypeScript 配置
15. 在 RxJS 流中实现正确的错误处理
16. 在 `*ngFor` 循环中使用 `trackBy` 函数
17. 编写覆盖率 >85% 的测试
18. 遵循 Angular 风格指南
19. 禁止使用基于 NgModule 的组件（兼容性要求除外）
20. 禁止忘记取消订阅 observables（使用 `takeUntilDestroyed` 或 `async` pipe）
21. 禁止在没有正确错误处理的情况下使用异步操作
22. 禁止跳过无障碍属性
23. 禁止在客户端代码中暴露敏感数据
24. 禁止在没有正当理由的情况下使用 `any` 类型
25. 禁止在 NgRx 中直接修改状态
26. 禁止跳过关键逻辑的单元测试
27. 实现 Angular 功能时提供：带独立配置的组件文件、涉及业务逻辑时的服务文件、使用 NgRx 时的状态管理文件、包含全面测试用例的测试文件、架构决策的简要说明

适用边界 · 注意事项

• 需要兼容旧版 Angular 或必须使用 NgModule 的项目
• 无法使用 Angular 17+ 独立组件与 signals 的环境