SuperAPI AI 工具集

angular-modernization

前端与建站

查看项目

更新于 10-15 17:26

技能介绍

用途:把遗留 Angular 组件与指令迁移到现代架构,分两步进行:先用 Angular CLI 自动化迁移,再套用 Bitwarden 特定规范。资料强调,凡有 CLI schematic 的功能一律用 CLI,不要手动迁移;手动迁移只用于 CLI 未覆盖的模式。

主要能力:第一步运行 Angular CLI 迁移。命令统一用 npx ng,且必须作用于目录而非文件,用 --path 指定目录;迁移需按顺序执行,部分命令存在依赖。依次为:standalone 组件(npx ng generate @angular/core:standalone --path=<directory> --mode=convert-to-standalone)、控制流语法(npx ng generate @angular/core:control-flow,*ngIf/*ngFor/*ngSwitch 转为 @if/@for/@switch)、信号输入(npx ng generate @angular/core:signal-input-migration)、信号输出(npx ng generate @angular/core:output-migration)、信号查询(npx ng generate @angular/core:signal-queries-migration)、inject() 函数(npx ng generate @angular/core:inject-migration)、自闭合标签(npx ng generate @angular/core:self-closing-tag)、未使用导入(npx ng generate @angular/core:unused-imports)。

第二步套用 Bitwarden 模式:添加 OnPush 变更检测;应用可见性修饰符(模板访问用 protected,内部实现用 private);组件本地状态转为 signals;服务端 observables 保持 observables,不转 signals;把业务逻辑抽到服务;正确组织类成员;更新 standalone 测试。详细示例见 migration-patterns.md。

关键决策:signals 仅用于组件本地状态(ADR-0027),observables 用于服务状态与跨组件通信(ADR-0003),用 toSignal() 将 observables 桥接到基于信号的组件。其他规则:始终加 OnPush;不使用 TypeScript enum(按 ADR-0025 用 const 对象加类型别名);不使用代码 region;保持组件轻薄,业务逻辑放在服务中。

第三步验证:用 npm run lint:fix 修复 lint 与格式,用 npm run test 运行测试,出现错误相应修复。完成前核对清单:OnPush 变更检测、visibility 修饰符、组件状态用 signals、服务状态用 observables、类成员已组织、测试更新并通过、无新 TypeScript enum、无代码 region。参考 Bitwarden ADR-0003、ADR-0025、ADR-0027、Bitwarden Angular Style Guide,以及 Angular Style Guide、Angular Migrations、Angular CLI Schematics。限制:资料未提供适用 Angular 版本、安装方式、运行环境要求与具体耗时等,暂未提供。