找不到'@ angular / common / http'模块

Question

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

正如人们在“安装：安装模块”部分中所看到的，他们导入了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

重要：HttpClientModule适用于Angular 4.3.0及更高版本。查看@Maximus'条评论和@Pengyy's answer了解详情。

<小时/> 原始答案：

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

中导入@NgModule

// 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) {}

正如文档中所写：https://angular.io/guide/http#making-a-request-for-json-data

但是，因为您导入了HttpModule

您需要将constructor(private httpClient: Http)注释为评论中所述的@Maximus和@Pengyy中的this answer。

有关HttpModule和HttpClientModule之间差异的详情，请查看以下答案：https://stackoverflow.com/a/45129865/5706293

Answer 2

重要更新：

HttpModule和来自Http的{​​{1}}自Angular V5 以来已被弃用，应该使用@angular/http和HttpClientModule来自{ {1}}，请参阅 CHANGELOG 。

对于Angular版本以前来自** @ 4.3.0 ，您应该从HttpClient注入@angular/common/http，Http用于导入NgModule的导入阵列。

@angular/http

在组件或服务中注入HttpModule

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

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

对于Angular版本（包括）4.3.0 之后，您可以使用http中的import { Http } from '@angular/http'; constructor(private http: Http) {} 代替HttpClient中的@angular/common/http。不要忘记先在Http的导入阵列导入@angular/http。

请参阅@ echonax的回答。

Answer 3

注意：这是@ 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 4

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

Answer 5

谨防汽车进口。我的HTTP_INTERCEPTORS是这样自动导入的：

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

而不是

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

导致此错误

Answer 6

您应该从服务中的<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <div class="single_dept_box"> <a href=""> <div class="dept_overlay"></div> <div class="icon-box-details-dept"> <div class="dept_circle_icon"> <i class="fa fa-plus-square" aria-hidden="true"></i> </div> <p>Department of Medicine</p> </div> </a> </div>导入http：

@angular/http

Answer 7

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

重现的步骤：

• npm install -g cordova ionic
• 离子启动myApp标签
• cd myApp
• cd node_modules / angular / common（不存在http模块）。

离子:(从终端/ cmd提示符运行离子信息），检查版本并确保它们是最新的。您还可以检查项目中package.json文件夹中的角度版本和包。

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

Answer 8

请参阅： http：弃用@ angular / http，而推荐使用@ angular / common / http。

Answer 9

此问题解决了吗？

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

将我的角度更新为version = 8之后

Answer 10

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

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

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

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