Cannot find the '@angular/common/http' module
AngularNode ModulesAngular Problem Overview
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.
Angular Solutions
Solution 1 - Angular
Important: HttpClientModule
is for Angular 4.3.0 and above. Check https://stackoverflow.com/users/2545680/maximus">**@Maximus'**</a> comments and https://stackoverflow.com/users/7579471/pengyy">**@Pengyy's**</a> https://stackoverflow.com/a/45207906/5706293">answer</a> 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 https://stackoverflow.com/users/2545680/maximus">**@Maximus**</a> stated in the comments and https://stackoverflow.com/users/7579471/pengyy">**@Pengyy**</a> in https://stackoverflow.com/a/45207906/5706293">**this answer**.
And for more info on differences between HttpModule
and HttpClientModule
, check this answer
Solution 2 - Angular
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.
Solution 3 - Angular
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);
}
Solution 4 - Angular
I was using http in angular 5 that was a problem. Using Httpclient resolved the issue.
Solution 5 - Angular
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
Solution 6 - Angular
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.
Solution 7 - Angular
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');
}
Solution 8 - Angular
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!
Solution 9 - Angular
Refer to this: http: deprecate @angular/http in favor of @angular/common/http.
Solution 10 - Angular
Is this issue resolved.
I am getting this error: ERROR in node_modules/ngx-restangular/lib/ngx-restangular-http.d.ts(3,27): error TS2307: Cannot find module '@angular/common/http/src/response'.
After updating my angular to version=8