调用 downgradeInjectable 在 AngularJS 模块中使用新的 Angular 服务会抛出 TypeError 代码

问题描述

尝试在混合应用程序的 Angular JS 模块中使用 Angular 服务会出现以下两个错误之一：

1. Error: [$injector:unpr] UnkNown provider: testServiceProvider <- testService - 即对于 AngularJS DI 服务注册太晚
2. TypeError: Cannot read property 'has' of undefined - 即在 AngularJS $injector 可用之前，在调用 downgradeInjectable 之前注册服务。

取决于我尝试在 AngularJS 模块上注册服务的位置：

• Angular 应用模块，AngularJS-bootstrap 之前：错误 1
• Angular 应用模块，后 AngularJS-bootstrap：错误 2
• Angular 测试服务：错误 1
• AngularJS 共享模块：错误 2

有谁知道如何解决这个问题，还是一种不受支持的方法？

代码

完整再现：StackBlitz

---

Angular ngUpgrade：downgradeInjectable

export function downgradeInjectable(token: any,downgradedModule: string = ''): Function {
  const factory = function($injector: IInjectorService) {
    const injectorKey = `${INJECTOR_KEY}${downgradedModule}`;
    const injectableName = isFunction(token) ? getTypeName(token) : String(token);
    const attemptedAction = `instantiating injectable '${injectableName}'`;

/*
 * Error 2 is thrown from the following method call,because $injector is undefined
 */

    validateInjectionKey($injector,downgradedModule,injectorKey,attemptedAction);

    try {
      const injector: Injector = $injector.get(injectorKey);
      return injector.get(token);
    } catch (err) {
      throw new Error(`Error while ${attemptedAction}: ${err.message || err}`);
    }
  };
  (factory as any)['$inject'] = [$INJECTOR];

  return factory;
}

---

角度：App Module

@NgModule({
  imports: [browserModule,CommonModule,UpgradeModule],declarations: [AppComponent,BaseComponent],providers: [{ provide: "$scope",useExisting: "$rootScope" }]
})
export class AppModule implements dobootstrap {
  constructor(private upgrade: UpgradeModule) {}

  public ngdobootstrap(app: ApplicationRef): void {
    setAngularJSGlobal(angular);

    // Defining the downgraded service here gives:
    // `TypeError: Cannot read property 'has' of undefined`

    angular
      .module(SHARED_MODULE_NAME)
      .factory("testService",[downgradeInjectable(TestService)]);

    this.upgrade.bootstrap(document.body,[SHARED_MODULE_NAME],{
      strictDi: false
    });

    // Defining the downgraded service here gives:
    // `Error: [$injector:unpr] UnkNown provider: testServiceProvider <- testService`

    app.bootstrap(AppComponent);
  }
}

AngularJS：Shared Module

import {
  downgradeComponent
  /*downgradeInjectable*/
} from "@angular/upgrade/static";

import { BASE_MODULE_NAME,SHARED_MODULE_NAME } from "./constants.ajs";

import * as angular from "angular";

import { AppComponent } from "../app/app.component";
// import { TestService } from "../app/services/test.service";

angular
  .module(SHARED_MODULE_NAME,[BASE_MODULE_NAME])
  .directive("appRoot",downgradeComponent({ component: AppComponent }));

// Defining the downgraded service here gives:
// `TypeError: Cannot read property 'has' of undefined`
//.factory("testService",[downgradeInjectable(TestService)]);

角度：Test Service

import { Injectable } from "@angular/core";
/*
import { SHARED_MODULE_NAME } from "../../ajs/constants.ajs";
import { downgradeInjectable } from "@angular/upgrade/static";
import * as angular from "angular";
*/

@Injectable({
  providedIn: "root"
})
export class TestService {
  getText() {
    return "New Text From Service";
  }
}

// Defining the downgraded service here gives:
// `Error: [$injector:unpr] UnkNown provider: testServiceProvider <- testService`


/*
angular
  .module(SHARED_MODULE_NAME)
  .factory("testService",[downgradeInjectable(TestService)]);
  */

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）