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.
Important : HttpClientModule
is for Angular 4.3.0 and above. Check @Maximus' comments and @Pengyy's answer for more info.
You need to inject HttpClient
in your component/service not the module. If you import HttpClientModule
in your @NgModule
constructor(private httpClient: HttpModule) {}
So change
constructor(private httpClient: HttpClient) {}
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.
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);
}
I was using http in angular 5 that was a problem. Using Httpclient resolved the issue.
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
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');
}
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:
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!
参考这个: http:弃用@angular/http 以支持@angular/common/http。
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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.