如何将旧版 AngularJS 应用迁移至现代 Angular

解决遗留系统升级痛点：通过 AI 指导，将陈旧的 AngularJS (1.x) 应用稳步迁移至现代 Angular 框架，支持通过混合模式实现无缝、渐进式的功能替换。

为什么需要这个技能

许多企业级项目仍运行在 AngularJS 上，但由于其已停止维护，面临着性能低下、缺乏现代工具支持以及人才断层等问题。

完全重写（Big Bang）风险极高且成本巨大。本技能教你如何利用 ngUpgrade 建立混合应用，让新旧两个版本的 Angular 在同一页面中共存，从而实现“边运行边迁移”，在保证业务连续性的前提下完成技术栈升级。

适用场景

• 需要将大规模 AngularJS (1.x) 应用升级到 Angular (2+) 的项目。
• 无法一次性停机重写，需要采取渐进式迁移策略的场景。
• 需要将旧的指令（Directives）转换为现代组件（Components）时。
• 现代化依赖注入（DI）系统和路由系统的重构。

核心工作流

1. 选择迁移策略

• 全量重写 (Big Bang)：适用于小型应用，直接用 Angular 重新开发。
• 渐进式迁移 (Incremental)：通过 ngUpgrade 运行混合应用，逐个功能迁移，适用于大型应用。
• 纵向切片 (Vertical Slice)：每次完整迁移一个独立功能模块。

2. 建立混合应用 (Hybrid Setup)

在 main.ts 中引导混合应用，使 AngularJS 模块在 Angular 环境中启动：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app/app.module';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule);
    upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true });
  });

3. 核心模块转换

• 组件化：将 AngularJS Controller 或 Directive 转换为 Angular @Component，利用 @Input 和 @Output 处理数据流。
• 服务升级：将 factory 或 service 转换为 @Injectable 类，并使用 HttpClient 替换 $http。
• 路由迁移：将 $routeProvider 配置转换为 Routes 数组定义。

4. 依赖注入互操作

• Angular AngularJS：使用 downgradeInjectable 将新服务导出给旧模块。
• AngularJS Angular：使用 InjectionToken 并在 providers 中通过 $injector 注入旧服务。

下载和安装

下载 angular-migration 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐