找不到“@angular/common/http”模块

Question

我正在关注this Angular 关于 Http 的基础教程。

正如在“设置：安装模块”部分中看到的那样，他们导入 HttpClientModule 如下：

import {HttpClientModule} from '@angular/common/http';

当我在我的项目中尝试这个时，我收到以下错误：“找不到模块'@angular/common/http'”。

我尝试过导入以下模块，如下：

import { HttpModule } from '@angular/http';

然后是我的导入部分：

imports: [
    HttpModule
],

现在的问题是，我无法将此 HttpModule 注入到我的服务对象中，并且出现以下错误：“找不到模块 HttpModule”。

这是我的服务类：

import { Injectable, OnInit } from '@angular/core';
//Custom Models
import { Feed } from '../Models/Feed';

@Injectable()
export class FeedsService {
    constructor(private httpClient: HttpModule) {}
}

我做错了什么？

更新 当我意识到我无法按照教程导入模块时，我应该做的就是运行npm update 命令来更新我的所有包。

Answer 1

这里的答案又过时了。为了解决这个问题，我必须这样做：

import { HttpClient, HttpClientModule } from '@angular/common/http';

...
@NgModule({
    imports: [
        HttpClientModule
    ],
    declarations: [],
    providers: [
        HttpClient
    ],

所有这些都在app.module.ts 中。这是角度 11。

Answer 2

重要提示：HttpClientModule 适用于 Angular 4.3.0 及更高版本。查看@Maximus' cmets 和@Pengyy's answer 了解更多信息。

---

原答案：

您需要在您的组件/服务而不是模块中注入HttpClient。如果你在你的@NgModule 中导入HttpClientModule

// app.module.ts:
 
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
 
// Import HttpClientModule from @angular/common/http
import {HttpClientModule} from '@angular/common/http';
 
@NgModule({
  imports: [
    BrowserModule,
    // Include it under 'imports' in your application module
    // after BrowserModule.
    HttpClientModule,
  ],
})
export class MyAppModule {}

所以改变

constructor(private httpClient: HttpModule) {}

到

constructor(private httpClient: HttpClient) {}

因为它是写在documentation

---

但是，由于您导入了 HttpModule

您需要将constructor(private httpClient: Http) 注入 cmets 中所述的@Maximus 和this answer 中的@Pengyy。

有关HttpModule 和HttpClientModule 之间差异的更多信息，请查看this answer

Answer 3

这个问题解决了吗？

我收到此错误： node_modules/ngx-restangular/lib/ngx-restangular-http.d.ts(3,27) 中的错误：错误 TS2307：找不到模块“@angular/common/http/src/response”。

将我的 Angular 更新为 version=8 后

Answer 4

参考这个： http: 弃用 @angular/http 以支持 @angular/common/http。

Answer 5

重要更新：

HttpModule 和 Http 来自 @angular/http 已自 Angular V5 起被弃用，应该使用来自 @angular/common/http 的 HttpClientModule 和 HttpClient 代替，请参考 @987654321 @。

---

对于 **@4.3.0 之前的 Angular 版本，您应该从 @angular/http 注入 Http，HttpModule 用于在 NgModule 的导入数组中导入。

import {HttpModule} from '@angular/http';

@NgModule({
  ...
  imports: [HttpModule]
})

在组件或服务中注入http

import { Http } from '@angular/http';

constructor(private http: Http) {}

---

对于 Angular 版本（包含）4.3.0，您可以使用来自@angular/common/http 的HttpClient，而不是来自@angular/http 的Http。不要忘记先在NgModule 的导入数组中导入HttpClientModule。

参考@echonax 的回答。

Answer 6

对于使用 Ionic 3 和 Angular 5 的任何人，我都会弹出相同的错误，但我在这里没有找到任何解决方案。但我确实找到了一些对我有用的步骤。

重现步骤：

• npm install -g cordova ionic
• ionic 启动 myApp 选项卡
• cd myApp
• cd node_modules/angular/common（不存在 http 模块）。

ionic：（从终端/cmd 提示符运行 ionic info），检查版本并确保它们是最新的。您还可以查看项目中 package.json 文件夹中的 Angular 版本和包。

我检查了我的依赖项和软件包并安装了cordova。重新启动原子，错误消失了。希望这会有所帮助！

Answer 7

当心自动导入。我的 HTTP_INTERCEPTORS 是这样自动导入的：

import { HTTP_INTERCEPTORS } from '@angular/common/http/src/interceptor';

而不是

import { HTTP_INTERCEPTORS } from '@angular/common/http';

导致此错误的原因

Answer 8

我在 Angular 5 中使用 http，这是一个问题。 使用 Httpclient 解决了这个问题。

Answer 9

注意：这是针对@angular/http，而不是要求的@angular/common/http！

以这种方式导入，完美运行：

// Import HttpModule from @angular/http
import {HttpModule} from '@angular/http';


@NgModule({
  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [...],
  entryComponents: [...],
  providers: [... ]
})

然后你像这样在 service.ts 中构建：

constructor(private http: Http) { }

getmyClass(): Promise<myClass[]> {
  return this.http.get(URL)
             .toPromise()
             .then(response => response.json().data as myClass[])
             .catch(this.handleError);
}

Answer 10

您应该在服务中从@angular/http 导入http：

import {Http} from '@angular/http';

constructor(private http: http) {} // <--Then Inject it here


// now you can use it in any function eg:
getUsers() {
    return this.http.get('whateverURL');
}