Cannot find the '@angular/common/http' module
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/httpimport {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
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.
note: This is for @angular/http, not the asked @angular/common/http!
Just import in this way, WORKS perfectly:
// Import HttpModule from @angular/httpimport {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);}