2

尝试在混合应用程序的 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
  • 角度测试服务：错误 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;
}

Angular :应用模块

@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：共享模块

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)]);

角度：测试服务

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)]);
  */
4

0 回答 0