Impossible de trouver le module '@angular/common/http'.

Question

Je suis ce Tutoriel fondamental sur Angular à propos de Http.

Comme on peut le voir dans la section "Setup : Installation du module", ils importent le HttpClientModule comme suit :

import {HttpClientModule} from '@angular/common/http';

Lorsque j'essaie ceci dans mon projet, j'obtiens l'erreur suivante : "Impossible de trouver le module '@angular/common/http'".

J'ai essayé d'importer le module suivant, comme suit :

import { HttpModule } from '@angular/http';

Et ensuite ma section d'importation :

imports: [
    HttpModule
],

Le problème maintenant est que je ne peux pas injecter ce HttpModule dans mon objet service, et j'obtiens l'erreur suivante : "Cannot find module HttpModule".

Voici ma classe de service :

import { Injectable, OnInit } from '@angular/core';
//Custom Models
import { Feed } from '../Models/Feed';

@Injectable()
export class FeedsService {
    constructor(private httpClient: HttpModule) {}
}

Qu'est-ce que je fais de mal ?

Mise à jour Tout ce que j'aurais dû faire lorsque j'ai réalisé que je ne pouvais pas importer le module comme indiqué dans le tutoriel, c'était d'exécuter la commande npm update pour mettre à jour tous mes paquets.

Answer 1

Important : HttpClientModule est pour Angular 4.3.0 et plus. Consultez @Maximus' commentaires et @Pengyy's réponse pour plus d'informations.

---

Réponse originale :

Vous devez injecter HttpClient dans votre composant/service et non dans le module. Si vous importez HttpClientModule dans votre @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 {}

Alors changez

constructor(private httpClient: HttpModule) {}

à

constructor(private httpClient: HttpClient) {}

comme il a été écrit dans le documentation

---

Cependant, puisque vous avez importé le HttpModule

vous devez injecter constructor(private httpClient: Http) comme @Maximus indiqué dans les commentaires et @Pengyy sur cette réponse .

Et pour plus d'informations sur les différences entre HttpModule et HttpClientModule , vérifier cette réponse

Answer 2

Mise à jour importante :

HttpModule et Http de @angular/http a été déprécié depuis Angular V5 Il faudrait utiliser HttpClientModule et HttpClient de @angular/common/http à la place, référez-vous à CHANGELOG .

---

Pour la version d'Angular précédent de **@4.3.0 Vous devez injecter Http de @angular/http et HttpModule sert à importer dans le tableau d'importation de votre NgModule.

import {HttpModule} from '@angular/http';

@NgModule({
  ...
  imports: [HttpModule]
})

Injecter http au niveau du composant ou du service

import { Http } from '@angular/http';

constructor(private http: Http) {}

---

Pour la version d'Angular après(inclure) 4.3.0 vous pouvez utiliser HttpClient de @angular/common/http au lieu de Http de @angular/http . N'oubliez pas d'importer HttpClientModule à votre NgModule d'abord.

Reportez-vous à la réponse de @echonax.

Answer 3

Note : Ceci est pour @angular/http, pas pour le demandé @angular/common/http !

Il suffit d'importer de cette manière, cela fonctionne parfaitement :

// 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: [... ]
})

et ensuite vous construisez dans le service.ts comme ceci :

constructor(private http: Http) { }

getmyClass(): Promise<myClass[]> {
  return this.http.get(URL)
             .toPromise()
             .then(response => response.json().data as myClass[])
             .catch(this.handleError);
}

Answer 4

J'utilisais http dans angular 5 qui était un problème. L'utilisation de Httpclient a résolu le problème.

Answer 5

Méfiez-vous des importations automatiques. Mon HTTP_INTERCEPTORS a été importé automatiquement comme ceci :

import { HTTP_INTERCEPTORS } from '@angular/common/http/src/interceptor';

au lieu de

import { HTTP_INTERCEPTORS } from '@angular/common/http';

ce qui a provoqué cette erreur