Angular创建GET请求服务报错：Http不存在，如何解决？

嗨，我一眼就揪出问题所在啦——你把Angular里新旧两个HTTP客户端类搞混了😉

问题根源 #

你已经从@angular/common/http导入了**HttpClient（这是Angular 4+推荐使用的新版HTTP服务），但在构造函数里却尝试注入Http**——这个是Angular 4.x之前的旧版服务，现在已经被废弃移除了，自然会提示"Http不存在"的错误。

两步快速修复 #

• 第一步：统一服务类型
  把构造函数里的Http改成HttpClient，和你导入的类保持一致就行。
• 第二步：确保模块导入依赖
  要使用HttpClient，必须在根模块（比如AppModule）或者该服务所属的特性模块中导入HttpClientModule，不然Angular没法创建这个服务的实例给你用。

修正后的完整代码 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  // 推荐加上`providedIn: 'root'`，Angular会自动把这个服务注册成单例，不用手动在模块里声明啦
  providedIn: 'root'
})
export class CoursesService {
  // 这里把Http替换成HttpClient
  constructor(private http: HttpClient) {
    this.http.get('https://jsonplaceholder.typicode.com/users');
  }

  getCourses() {
    // 现在可以取消注释这行，正常发起GET请求啦
    return this.http.get('https://jsonplaceholder.typicode.com/users');
    // return ["math", "chemistry", "physics"];
  }
}

附：模块导入示例（以AppModule为例） #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 别忘了导入HttpClientModule
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 必须添加这一行哦
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样改完之后，你的报错就会消失，也能正常用新版HTTP客户端发送请求啦～

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