Cannot find the '@angular/common/http' module

Question

I am following this fundamental tutorial on Angular about Http.

As one can see in the "Setup: Installing the module" section, they import the HttpClientModule as follow:

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

When I try this in my project, I get the following error: "Cannot find module '@angular/common/http'".

I have tried importing the following module, as follow:

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

And then my imports section:

imports: [
    HttpModule
],

The problem now is, I cannot inject this HttpModule into my service object, and I get the following error: "Cannot find module HttpModule".

Here is my service class:

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

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

What am I doing wrong?

Update All I should have done when I realized I could not import the module as per the tutorial, was to run the npm update command, to update all my packages.

see this answer for the difference between Http and HttpClient — Max Koretskyi
– Max Koretskyi, Commented Jul 20, 2017 at 7:24
On Angular 11 I solved this problem deleting node_modules folder and run npm install — Stupid
– Stupid, Commented Mar 26, 2021 at 9:27

Osama Rizwan · Accepted Answer · 2020-11-18 12:47:10Z

74

Important: HttpClientModule is for Angular 4.3.0 and above. Check @Maximus' comments and @Pengyy's answer for more info.

Original answer:

You need to inject HttpClient in your component/service not the module. If you import HttpClientModule in your @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 {}

So change

constructor(private httpClient: HttpModule) {}

to

constructor(private httpClient: HttpClient) {}

as it's been written in the documentation

However, since you imported the HttpModule

you need to inject constructor(private httpClient: Http) as @Maximus stated in the comments and @Pengyy in this answer.

And for more info on differences between HttpModule and HttpClientModule, check this answer

edited Nov 18, 2020 at 12:47

Osama Rizwan

6131 gold badge7 silver badges19 bronze badges

answered Jul 20, 2017 at 7:12

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

monstertjie_za Over a year ago

This does not work: If I follow their tutorial, I cannot import this: import {HttpClientModule} from '@angular/common/http'; I don't have that common/http module. Where can I find it

Max Koretskyi Over a year ago

it's just Http - constructor(private httpClient: Http) since he's importing '@angular/http', not '@angular/common/http'

eko Over a year ago

@monstertjie_za Maximus is right you are importing HttpModule but trying to use HttpClient you need to select 1

eko Over a year ago

@Maximus if you put down an answer I'll delete mine and upvote yours :)

Max Koretskyi Over a year ago

@echonax, upvote mine next time) just edit the answer and add details about httpClient and http

|

Pengyy · Accepted Answer · 2018-04-03 00:53:56Z

43

Important Update:

HttpModule and Http from @angular/http has been deprecated since Angular V5, should of using HttpClientModule and HttpClient from @angular/common/http instead, refer CHANGELOG.

For Angular version previous from **@4.3.0, You should inject Http from @angular/http, and HttpModule is for importing at your NgModule's import array.

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

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

Inject http at component or service

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

constructor(private http: Http) {}

For Angular version after(include) 4.3.0, you can use HttpClient from @angular/common/http instead of Http from @angular/http. Don't forget to import HttpClientModule at your NgModule's import array first.

Refer @echonax's answer.

edited Apr 3, 2018 at 0:53

answered Jul 20, 2017 at 7:18

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

8 Comments

monstertjie_za Over a year ago

You are the first one who posted a solution that helped me, thanks.

monstertjie_za Over a year ago

@echonax Okay, where is the module, I cannot find it?

Max Koretskyi Over a year ago

see this answer for the difference between Http and HttpClient

Pengyy Over a year ago

@Maximus great! sorry for I didn't follow the change log for a while.

Max Koretskyi Over a year ago

@Pengyy, Angular is very dynamic)

|

j2L4e · Accepted Answer · 2017-07-25 10:09:48Z

4

note: This is for @angular/http, not the asked @angular/common/http!

Just import in this way, WORKS perfectly:

// 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: [... ]
})

and then you contruct in the service.ts like this:

constructor(private http: Http) { }

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

edited Jul 25, 2017 at 10:09

j2L4e

7,0581 gold badge36 silver badges40 bronze badges

answered Jul 22, 2017 at 4:50

Luciano Huguenin

2211 silver badge5 bronze badges

1 Comment

ronIT Over a year ago

Property 'subscribe' does not exist on type 'Promise<IEmployee[]>'.

SUNIL JADHAV · Accepted Answer · 2018-01-18 08:55:33Z

1

I was using http in angular 5 that was a problem. Using Httpclient resolved the issue.

edited Jan 18, 2018 at 8:55

answered Jan 15, 2018 at 6:56

SUNIL JADHAV

3453 silver badges12 bronze badges

2 Comments

Nouman Bhatti Over a year ago

not necessarily the same version. Change to some old version and it'll work.

Stephen Romero Over a year ago

I was able to get it to work using Angular 5. I suppose there may have been some bug fixes under the hood.

LazyCreep · Accepted Answer · 2018-02-08 12:13:02Z

1

Beware of auto imports. my HTTP_INTERCEPTORS was auto imported like this:

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

instead of

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

which caused this error

answered Feb 8, 2018 at 12:13

LazyCreep

2112 silver badges15 bronze badges

Comments

fIwJlxSzApHEZIl · Accepted Answer · 2021-07-19 18:46:28Z

1

The answers here are out of date once again. To resolve this I had to do:

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

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

all of this inside the app.module.ts. this is for angular 11.

edited Jul 19, 2021 at 18:46

answered Jul 19, 2021 at 18:29

fIwJlxSzApHEZIl

13.6k7 gold badges71 silver badges78 bronze badges

Comments

Touqeer Shafi · Accepted Answer · 2017-07-20 07:20:35Z

0

You should import http from @angular/http in your service:

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');
}

answered Jul 20, 2017 at 7:20

Touqeer Shafi

5,3043 gold badges31 silver badges48 bronze badges

Comments

Stephen Romero · Accepted Answer · 2018-03-19 19:11:07Z

0

For anyone using Ionic 3 and Angular 5, I had the same error pop up and I didn't find any solutions here. But I did find some steps that worked for me.

Steps to reproduce:

npm install -g cordova ionic
ionic start myApp tabs
cd myApp
cd node_modules/angular/common (no http module exists).

ionic:(run ionic info from a terminal/cmd prompt), check versions and make sure they're up to date. You can also check the angular versions and packages in the package.json folder in your project.

I checked my dependencies and packages and installed cordova. Restarted atom and the error went away. Hope this helps!

answered Mar 19, 2018 at 19:11

Stephen Romero

3,0726 gold badges31 silver badges52 bronze badges

Comments

jazeb007 · Accepted Answer · 2019-03-24 19:27:16Z

0

Refer to this: http: deprecate @angular/http in favor of @angular/common/http.

answered Mar 24, 2019 at 19:27

jazeb007

6781 gold badge6 silver badges13 bronze badges

Comments

lissettdm · Accepted Answer · 2023-01-06 16:35:35Z

When adding any dependency and getting this error

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: @angular/[email protected] npm ERR! node_modules/@angular/core npm ERR! @angular/core@"^14.2.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @angular/core@"7.2.16" from @angular/[email protected] npm ERR! node_modules/@angular/http npm ERR! @angular/http@"7.2.16" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! C:\Users\DELL\AppData\Local\npm-cache_logs\2023-01-05T17_55_53_622Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\DELL\AppData\Local\npm-cache_logs\2023-01-05T17_55_53_622Z-debug-0.log

You can force clear the cache by running run npm cache clean --force

Collectives™ on Stack Overflow

Cannot find the '@angular/common/http' module

10 Answers 10

9 Comments

8 Comments

note: This is for @angular/http, not the asked @angular/common/http!

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

9 Comments

8 Comments

note: This is for @angular/http, not the asked @angular/common/http!

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related