Angular/AngularJS混合应用（ng-upgrade）服务使用问题咨询

嘿，很高兴你已经迈出了ng-upgrade迁移的关键一步，搭建好了Angular核心应用！针对混合应用里的服务使用，我整理了几个核心场景和实用建议，希望能帮到你：

1. Angular服务在AngularJS组件中调用 #

如果你的新功能已经用Angular服务实现，想要让旧的AngularJS组件也能使用它，步骤很清晰：

• 首先确保Angular服务是单例的，推荐用@Injectable({ providedIn: 'root' })装饰，或者在Angular的NgModule的providers数组中声明。
• 用UpgradeModule提供的downgradeInjectable方法，把Angular服务“降级”成AngularJS能识别的工厂函数，然后在AngularJS模块里注册：

// 你的Angular服务
@Injectable({ providedIn: 'root' })
export class AngularDataService {
  fetchLatestData() {
    return 'Fresh data from Angular service';
  }
}

// 在AngularJS模块中注册降级后的服务
angular.module('myLegacyApp').factory('angularDataService', downgradeInjectable(AngularDataService) as any);

• 之后就能在AngularJS的控制器、指令里像普通AngularJS服务一样注入使用了：

angular.module('myLegacyApp').controller('OldController', ['angularDataService', function(service) {
  console.log(service.fetchLatestData());
}]);

2. AngularJS服务在Angular组件中调用 #

对于还没迁移的AngularJS服务，想要在新的Angular组件里使用，需要把它“升级”：

• 先确认你的AngularJS服务已经在对应的模块里注册好了：

// 旧的AngularJS服务
angular.module('myLegacyApp').factory('legacyDataService', function() {
  return {
    getLegacyRecords: () => 'Archived data from AngularJS service'
  };
});

• 在Angular的NgModule里，用upgradeInjectable方法把AngularJS服务包装成Angular能注入的提供者，加入providers数组：

import { upgradeInjectable } from '@angular/upgrade/static';
import { Injector } from '@angular/core';

@NgModule({
  providers: [
    { 
      provide: 'legacyDataService', 
      useFactory: upgradeInjectable('legacyDataService'), 
      deps: [Injector] 
    }
  ]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}
  ngDoBootstrap() {
    // 启动混合应用
    this.upgrade.bootstrap(document.body, ['myLegacyApp'], { strictDi: true });
  }
}

• 最后在Angular组件里通过@Inject注入使用：

import { Component, Inject } from '@angular/core';

@Component({
  selector: 'app-main',
  template: '<p>{{ legacyInfo }}</p>'
})
export class MainComponent {
  legacyInfo: string;
  constructor(@Inject('legacyDataService') private legacyService: any) {
    this.legacyInfo = legacyService.getLegacyRecords();
  }
}

3. 混合场景下的服务最佳实践 #

• 优先使用Angular服务：新开发的功能尽量基于Angular服务实现，逐步替换旧的AngularJS服务，这样能减少后续完全迁移时的工作量。
• 保证单例一致性：不管是降级还是升级服务，一定要确保在整个混合应用中服务是单一实例，避免出现数据不同步的问题。比如降级后的Angular服务，在Angular和AngularJS中使用的是同一个实例。
• 避免双向依赖：尽量不要让Angular服务依赖AngularJS服务，反之亦然。如果必须有依赖关系，优先让AngularJS服务依赖Angular服务——毕竟我们最终要淘汰AngularJS。

• 开启严格依赖注入：在启动AngularJS应用时加上strictDi: true选项，强制要求显式标注依赖，避免隐式依赖导致的潜在问题，也让代码更符合Angular的风格。
• 分阶段迁移服务：不要尝试一次性迁移所有服务，先从独立的、无复杂依赖的服务开始，逐步处理依赖链复杂的服务，降低迁移风险。
• 利用Angular DI的优势：新的Angular服务尽量用providedIn: 'root'来实现树摇优化，减少最终打包的体积，同时享受Angular类型安全的DI带来的便利。
• 隔离测试：分别为Angular服务和AngularJS服务编写单元测试，混合应用中用Angular的TestBed测试新代码，用AngularJS的测试框架验证旧代码，确保迁移过程中功能不受影响。

内容的提问来源于stack exchange，提问作者Thierry Blais