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.

回答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: https://angular.io/guide/http#making-a-request-for-json-data

---

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: https://stackoverflow.com/a/45129865/5706293

回答2:

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.

回答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 {   return this.http.get(URL)              .toPromise()              .then(response => response.json().data as myClass[])              .catch(this.handleError); } 

回答4:

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

回答5:

You should import http from @angular/http in your service:

import {Http} from '@angular/http';  constructor(private http: http) {} // 

回答6:

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

文章来源: Cannot find the '@angular/common/http' module