SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场angular-migration

angular-migration

编程与开发

查看项目

更新于 10-15 15:40

技能介绍

用途

angular-migration 用于指导把 AngularJS（1.x）应用迁移到 Angular（2+）。适用场景包括：迁移 AngularJS 应用到 Angular、运行 AngularJS/Angular 混合应用、将指令转换为组件、现代化依赖注入、迁移路由系统、升级到最新 Angular 版本、实施 Angular 最佳实践。

不适用场景：并非从 AngularJS 迁移到 Angular、应用已使用现代 Angular 版本、仅需不涉及框架变更的小型 UI 修复。

支持材料说明

资料说明：本目录副本包含内联指导内容，但不包含以下支持路径，它们属于外部前置条件而非随附文件：

  • <support-root>/references/hybrid-mode.md
  • <support-root>/references/component-migration.md
  • <support-root>/references/dependency-injection.md
  • <support-root>/references/routing.md
  • <support-root>/assets/hybrid-bootstrap.ts
  • <support-root>/assets/migration-timeline.md
  • <support-root>/scripts/analyze-angular-app.sh

在依赖这些路径的步骤之前，应先获取原始支持材料或已安装实例；本技能未提供已验证的下载来源。需相对该安装位置解析每个路径、检查其内容、核实适用的许可与执行前置条件；在所需文件存在之前，不应运行命令或声称已遵循引用的流程，也不应伪造缺失脚本或把同名无关文件视为等价。此处有完整文档的独立步骤可在授权范围内进行；依赖缺失文件的步骤应报告为不可用。

主要能力与操作流程

  1. 评估 AngularJS 代码库、依赖与迁移风险。
  2. 选择迁移策略（混合 vs 重写）并定义里程碑。
  3. 设置 ngUpgrade，迁移模块、组件与路由。
  4. 用测试验证并规划安全切换。

安全注意事项：避免没有回滚与预发布验证的一次性切换；在增量迁移期间保持混合兼容性测试。

迁移策略

  • 全量重写（Big Bang）：在 Angular 中重写整个应用，并行开发，一次切换。适合小型应用、绿地项目。
  • 增量混合（Hybrid）：AngularJS 与 Angular 并行运行，按功能逐个迁移，使用 ngUpgrade 实现互操作。适合大型应用、持续交付。
  • 垂直切片：完整迁移一个功能，新功能用 Angular，旧功能保留在 AngularJS，逐步替换。适合中型应用、边界清晰的功能。

混合应用搭建

资料给出 main.ts 与 app.module.ts 示例：在 main.ts 中使用 platformBrowserDynamic 引导 AppModule，再注入 UpgradeModule，并调用 upgrade.bootstrap 引导 AngularJS 应用（strictDi: true）；app.module.ts 中导入 BrowserModule 与 UpgradeModule，并实现空的 ngDoBootstrap（在 main.ts 中手动引导）。

组件迁移

  • AngularJS 控制器转 Angular 组件：资料展示控制器中使用 $scope 与 UserService 的旧写法，以及使用 @Component、ngOnInit、constructor 注入 UserService 并改用 subscribe 的新写法。
  • AngularJS 指令转 Angular 组件：资料展示带 scope 绑定（user: '=', onDelete: '&'）的旧指令，以及使用 @Input、@Output、EventEmitter 的新组件，调用方式为 <app-user-card [user]="user" (delete)="handleDelete()"></app-user-card>。

服务迁移

资料展示 AngularJS factory（使用 $http 返回 getUser/saveUser）迁移为 Angular @Injectable({ providedIn: 'root' }) 类，使用 HttpClient 并返回 Observable。

依赖注入变更

  • Angular → AngularJS 降级：使用 downgradeInjectable 把 Angular 服务包装为 AngularJS factory 供旧代码使用。
  • AngularJS → Angular 升级：使用 InjectionToken 与 useFactory（deps: ['$injector']）把 AngularJS 服务暴露给 Angular，通过 @Inject 使用。

路由迁移

资料展示 AngularJS $routeProvider 的 when('/users') 与 when('/users/:id') 配置，迁移为 Angular 的 Routes 数组（path + component），并通过 RouterModule.forRoot(routes) 导入。

表单迁移

资料展示 AngularJS 模板驱动表单（ng-submit、ng-model、ng-disabled）迁移为 Angular 模板驱动表单（#userForm="ngForm"、(ngSubmit)、[(ngModel)]、[disabled]）以及首选的反应式表单（FormBuilder、FormGroup、Validators）。

迁移时间线

资料给出阶段划分：阶段 1 搭建（1-2 周，安装 Angular CLI、搭建混合应用、配置构建工具、设置测试）；阶段 2 基础设施（2-4 周，迁移服务、工具、路由、共享组件）；阶段 3 功能迁移（视情况，逐功能迁移、充分测试、增量部署）；阶段 4 清理（1-2 周，移除 AngularJS 代码与 ngUpgrade、优化打包、最终测试）。

资源引用

资料列出的参考资源包括：references/hybrid-mode.md（混合应用模式）、references/component-migration.md（组件转换指南）、references/dependency-injection.md（DI 迁移策略）、references/routing.md（路由迁移）、assets/hybrid-bootstrap.ts（混合应用模板）、assets/migration-timeline.md（项目规划）、scripts/analyze-angular-app.sh（应用分析脚本）。如前述，这些支持文件在目录副本中未随附。

最佳实践与常见陷阱

最佳实践：先从服务开始迁移（更容易）；采用增量方式逐功能迁移；持续测试；尽早迁移到 TypeScript；从第一天遵循 Angular 风格指南；先跑通再优化；保留迁移记录。

常见陷阱：混合应用搭建不正确；先迁移 UI 再迁移逻辑；忽略变更检测差异；未正确处理 scope；混用 AngularJS 与 Angular 模式；测试不足。

限制

仅在任务明确匹配上述范围时使用；不应把输出视为环境特定验证、测试或专家评审的替代；当缺少所需输入、权限、安全边界或成功标准时，应停止并请求澄清。