如何将大型Angular 1.4 Web应用迁移至Angular 5？求经验指导

我之前帮团队完成过从 Angular 1.4 到 Angular 5 的迁移，踩了不少坑，下面是亲测有效的步骤和关键注意点，希望能帮到你：

一、迁移前的准备工作 #

先对现有 Angular 1.4 项目做代码优化，降低后续迁移难度：

• 把大型控制器拆分成更小的、职责单一的控制器/指令，尽量贴合组件化思想；
• 移除冗余的全局变量和依赖，梳理清楚各个模块之间的依赖关系；
• 把重复的业务逻辑抽成独立的服务，减少代码耦合；
• 确保现有项目的单元测试覆盖率达标，后续迁移时能快速验证功能正确性。

二、搭建混合运行环境 #

Angular 官方提供了 @angular/upgrade 模块，支持两个框架混合运行，这是渐进式迁移的核心：

1. 安装 Angular 5 相关依赖：

   npm install @angular/core@5.x @angular/common@5.x @angular/upgrade@5.x @angular/platform-browser@5.x @angular/platform-browser-dynamic@5.x rxjs@5.x zone.js --save
   

2. 在 Angular 1.4 的主模块中引入 UpgradeModule，并配置启动逻辑：

   // Angular 1 主模块
   angular.module('myApp', [])
     .run(['$rootScope', ($rootScope) => {
       // 保留原有 Angular 1 启动逻辑
     }]);
   
   // 初始化 Angular 5 并和 Angular 1 混合运行
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { UpgradeModule } from '@angular/upgrade/static';
   import { NgModule } from '@angular/core';
   
   @NgModule({
     imports: [UpgradeModule],
     providers: []
   })
   export class AppModule {
     constructor(private upgrade: UpgradeModule) {}
     ngDoBootstrap() {
       this.upgrade.bootstrap(document.body, ['myApp']);
     }
   }
   
   platformBrowserDynamic().bootstrapModule(AppModule);
   

3. 调整项目构建配置（比如 Webpack），同时支持编译 Angular 1 和 Angular 5 代码。

三、渐进式迁移组件与服务 #

不要试图一次性重写所有代码，从最独立、依赖最少的模块开始迁移：

1. 迁移组件 #

• 把 Angular 1 的指令/控制器转换成 Angular 5 的组件；
• 使用 UpgradeComponent 把 Angular 5 组件降级，在 Angular 1 模板中使用；
• 或者用 DowngradeComponent 把 Angular 1 组件升级，在 Angular 5 模板中使用；
• 示例：把 Angular 5 组件引入 Angular 1 模块

  import { downgradeComponent } from '@angular/upgrade/static';
  import { MyAngular5Component } from './my-angular5.component';
  
  angular.module('myApp')
    .directive('myAngular5Component', downgradeComponent({ component: MyAngular5Component }) as angular.IDirectiveFactory);
  

2. 迁移服务 #

• 用 Angular 5 的依赖注入方式重写服务，然后通过 downgradeInjectable 提供给 Angular 1 使用；
• 示例：

  import { Injectable } from '@angular/core';
  import { downgradeInjectable } from '@angular/upgrade/static';
  
  @Injectable()
  export class MyService {
    get data() { return 'Hello from Angular 5'; }
  }
  
  angular.module('myApp')
    .factory('myService', downgradeInjectable(MyService) as angular.IFactoryFunction);
  

四、路由迁移 #

Angular 1 的路由（ngRoute/ui-router）和 Angular 5 Router 差异较大，建议逐步替换：

• 先保留原有 Angular 1 路由，把单个路由对应的页面迁移成 Angular 5 组件；
• 当大部分页面都迁移完成后，切换到 Angular 5 Router，重新配置所有路由规则；
• 注意处理路由参数传递、导航守卫等逻辑的差异。

五、关键注意事项 #

• 避免混合双向绑定：尽量不要在混合模式下使用复杂的双向绑定（比如 Angular 1 的 ng-model 和 Angular 5 的 [(ngModel)] 混用），容易触发不可预期的变化检测问题；
• 样式隔离：Angular 5 组件默认开启样式隔离，迁移时要注意原有全局样式和组件样式的冲突，必要时调整 ViewEncapsulation 配置；
• 第三方库适配：对于 Angular 1 的第三方指令（比如 UI Bootstrap），优先寻找对应的 Angular 5 版本，若没有则自己封装成 Angular 5 组件；
• 性能优化：Angular 5 的变化检测机制和 Angular 1 不同，迁移后注意检测性能瓶颈，必要时使用 ChangeDetectionStrategy.OnPush 优化。

六、最终清理 #

当所有功能都迁移完成并验证通过后：

• 移除 Angular 1 相关依赖（比如 angular.js、ng-route 等）；
• 删除混合模式相关的代码（比如 UpgradeModule、降级/升级逻辑）；
• 统一代码风格，遵循 Angular 5 的最佳实践。

内容的提问来源于stack exchange，提问作者Anurag Tiwari