如何将降级的 Angular 服务注入到 AngularJS 项目中？

Question

我一直在按照指南 here 升级 angularjs 项目。

然而，我真正想要升级的代码库已经为大多数服务提供了 ts classes，所以我遵循 official guide 替换了 angularjs phone 服务与 ts class。所以现在我有一个 ts class 用于 phone 服务，但是当我运行带有 ng serve 的应用程序时，phone 服务是一个未知的提供者。

我已经尝试将 "types": ["angular"] 添加到我的 tsconfig。
我已经尝试在服务文件中声明 angular

import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { HttpClient } from "@angular/common/http";
import { IPhoneData } from "../../interfaces/IPhoneData";

// angular does not get resolved during compilation this way
// declare var angular: angular.IAngularStatic;

// Phone is an unknown provider this way
declare var angular: any;

import { downgradeInjectable } from '@angular/upgrade/static';

@Injectable()
export class Phone {
  constructor(private http: HttpClient) { }
  query(): Observable<IPhoneData[]> {
    return this.http.get<IPhoneData[]>(`phones/phones.json`);
  }
  get(id: string): Observable<IPhoneData> {
    return this.http.get<IPhoneData>(`phones/${id}.json`);
  }
}

angular.module('core.phone')
  .factory('phone', downgradeInjectable(Phone));

如何将 phone 服务 ts class 注入到 angularjs 组件中？ Link 到 my repo.

Answer 1

我在某个地方丢失了 'Phone' 工厂的情况，它应该像下面这样（Observables 也应该是承诺）。

export class Phone {
  constructor(private http: HttpClient) { }
  query(): Promise<IPhoneData[]> {
    return this.http.get<IPhoneData[]>(`phones/phones.json`).toPromise();
  }
  get(id: string): Promise<IPhoneData> {
    return this.http.get<IPhoneData>(`phones/${id}.json`).toPromise();
  }
}

angular.module('core.phone')
  .factory('Phone', downgradeInjectable(Phone));

如何将降级的 Angular 服务注入到 AngularJS 项目中？

How to inject downgraded Angular service into an AngularJS project?

angularjs

angular

dependency-injection

ng-upgrade