Cannot find the '@angular/common/http' module
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.
Solution 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
Solution 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.
Solution 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);
}