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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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.

Answer 7

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

Answer 8

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!

Answer 9

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

Answer 10

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: matrimonial-ui@0.0.0 npm ERR! Found: @angular/core@14.2.12 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/http@7.2.16 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