AngularJS1.4/Angular5.2混合应用中升级服务为组件提供者的正确方法

在你用downgradeModule做隔离式混合升级的场景下，直接在providers里用useValue硬取AngularJS注入器的方式确实会出问题——要么是Angular初始化时AngularJS注入器还没就绪，要么是依赖解析逻辑不兼容。下面是适配你的场景的正确步骤：

1. 定义Angular注入令牌（InjectionToken） #

因为Angular无法直接识别AngularJS服务的类型，我们需要创建一个令牌来标识这个服务，避免依赖解析错误：

import { InjectionToken } from '@angular/core';
import { MyNamespace } from '../path/to/your/angularjs-typings';

// 用令牌关联AngularJS服务的类型
export const MY_ANGULARJS_SERVICE = new InjectionToken<MyNamespace.MyService>(
  'AngularJS MyService Instance'
);

2. 用工厂函数延迟获取AngularJS服务 #

不要用useValue立即获取注入器，改用useFactory结合UpgradeModule来延迟获取——这样能确保AngularJS注入器已经初始化完成，而且适配downgradeModule的隔离机制：

模块级别配置（推荐，全局可用） #

import { NgModule } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import { MY_ANGULARJS_SERVICE } from './tokens';

@NgModule({
  providers: [
    {
      provide: MY_ANGULARJS_SERVICE,
      // 通过UpgradeModule获取AngularJS注入器，再取出目标服务
      useFactory: (upgrade: UpgradeModule) => upgrade.injector.get('myService'),
      // 声明依赖：告诉Angular需要先注入UpgradeModule
      deps: [UpgradeModule]
    }
  ]
})
export class YourAngularModule {}

组件级别配置（仅当前组件可用） #

如果只需要在单个组件中使用，也可以直接在组件的providers里配置：

import { Component, Inject } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import { MY_ANGULARJS_SERVICE } from './tokens';
import { MyNamespace } from '../path/to/your/angularjs-typings';

@Component({
  selector: 'app-separator',
  template: '<div>...</div>',
  providers: [
    {
      provide: MY_ANGULARJS_SERVICE,
      useFactory: (upgrade: UpgradeModule) => upgrade.injector.get('myService'),
      deps: [UpgradeModule]
    }
  ]
})
export class SeparatorComponent {
  // 通过@Inject+令牌注入服务
  constructor(
    @Inject(MY_ANGULARJS_SERVICE) private myService: MyNamespace.MyService
  ) {
    // 现在可以正常使用myService的方法了
    this.myService.doSomething();
  }
}

为什么你的原有方案会报错？ #

• 构造函数参数解析错误：Angular无法识别MyNamespace.MyService这个AngularJS服务的依赖注入规则，必须用Angular的InjectionToken来明确标识注入目标。
• Invalid providers错误：useValue会在Angular初始化providers时立即执行angular.element("body").injector()，这时候AngularJS的注入器可能还没创建完成（尤其是downgradeModule的隔离模式下，AngularJS启动时机更晚），导致返回null，触发Angular的提供者校验错误。

额外注意事项 #

确保你的Angular模块已经导入了UpgradeModule，并且在downgradeModule的启动逻辑中正确初始化了AngularJS模块——这样UpgradeModule才能拿到正确的AngularJS注入器。

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