Angular的HttpClientModule不存在get()方法的原因是什么？

你遇到的报错是导入对象误用导致的，确实需要调整导入的内容，不需要更换依赖包，仅修改导入和注入的对象即可。

错误原因 #

你当前导入的HttpClientModule是Angular的模块类，仅用于在根模块/特性模块的imports数组中注册，来全局启用HTTP客户端能力，本身不提供get、post等请求方法，因此注入后调用get方法会抛出属性不存在的错误。

修正步骤 #

• 第一步：调整服务文件的导入语句，将导入HttpClientModule改为导入可注入的服务类HttpClient
• 第二步：修改构造函数的注入参数类型，把HttpClientModule替换为HttpClient
• 第三步：确认根模块（通常为app.module.ts）的imports数组中已经引入了HttpClientModule，否则HTTP相关能力无法全局生效。

修正后的完整服务代码 #

import { Injectable } from '@angular/core';
// 替换为导入HttpClient
import { HttpClient } from '@angular/common/http';
import { Stock } from '../shared/models/stock-model';
// Angular12+版本建议额外导入lastValueFrom替代废弃的toPromise
// import { lastValueFrom } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DashboardService {

  readonly url = 'https://apistockssqw.herokuapp.com/bootcamp/stock'

  // 构造函数注入类型改为HttpClient
  constructor(private http: HttpClient) { }

  async getStock(): Promise<Stock[]>{
    return this.http.get<Stock[]>(`${this.url}/stock`).toPromise();
    // Angular12+版本建议改用下面的写法
    // return lastValueFrom(this.http.get<Stock[]>(`${this.url}/stock`));
  }

}

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