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

Posted 2023-02-16

【中文标题】找不到“@angular/common/http”模块

【英文标题】：Cannot find the '@angular/common/http' module

【发布时间】：2017-12-25 17:34:04

【问题描述】：

我正在关注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 命令来更新我的所有包。

【问题讨论】：

查看this answer了解Http和HttpClient之间的区别

在 Angular 11 上我解决了这个问题，删除 node_modules 文件夹并运行 npm install

【参考方案1】：

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

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

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

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

【参考方案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

【讨论】：

这不起作用：如果我按照他们的教程进行操作，我将无法导入此内容： import HttpClientModule from '@angular/common/http';我没有那个 common/http 模块。我在哪里可以找到它

只是Http - constructor(private httpClient: Http)，因为他正在导入'@angular/http'，而不是'@angular/common/http'

@monstertjie_za Maximus 是对的，您正在导入 HttpModule 但尝试使用 HttpClient 您需要选择 1

@Maximus 如果你写下答案，我会删除我的答案并为你的答案投票：)

@echonax，下次投我的票）只需编辑答案并添加有关 httpClient 和 http 的详细信息

【参考方案3】：

这个问题解决了吗？

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

将我的 Angular 更新为 version=8 后

【参考方案4】：

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

【参考方案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 的回答。

【讨论】：

您是第一个发布对我有帮助的解决方案的人，谢谢。

@echonax 好的，模块在哪里，我找不到？

见this answerHttp和HttpClient之间的区别

@Maximus 太棒了！抱歉，我有一段时间没有关注更改日志。

@Pengyy，Angular 非常动态）

【参考方案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。重新启动原子，错误消失了。希望这会有所帮助！

【参考方案7】：

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

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

而不是

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

导致此错误的原因

【参考方案8】：

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

【讨论】：

不一定是同一个版本。换成旧版本就可以了。

我能够使用 Angular 5 让它工作。我想可能已经修复了一些错误。

【参考方案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);

【讨论】：

“Promise”类型上不存在“订阅”属性。

【参考方案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');