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

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';

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

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

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

Et puis ma section importations: 

imports: [
    HttpModule
],

Le problème maintenant est, Je ne peux pas injecter ceci HttpModule dans mon objet service, et j'obtiens l'erreur suivante: "Impossible de trouver le 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 quand j'ai réalisé que je ne pouvais pas importer le module selon le tutoriel, était d'exécuter la commande npm update, pour mettre à jour tous mes paquets.

32
demandé sur monstertjie_za 2017-07-20 10:06:22

7 réponses

Important: HttpClientModule est pour angulaire 4.3.0 et ci-dessus. Vérifier @Maximus' commentaires et @Pengyy de l' réponse pour plus d'info.

Réponse originale à cette question:

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

Donc changer 

constructor(private httpClient: HttpModule) {}

À

constructor(private httpClient: HttpClient) {}

Comme il a été écrit dans la documentation: https://angular.io/guide/http#making-a-request-for-json-data

Cependant, puisque vous avez importé le HttpModule

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

Et pour plus d'infos sur les différences entre les HttpModule et HttpClientModule, cochez cette réponse: https://stackoverflow.com/a/45129865/5706293

34
répondu eko 2017-08-16 12:13:09

Mise À Jour Importante:

HttpModule et Http from @angular/http a été obsolète depuis Angular v5, devrait utiliser HttpClientModule et HttpClient from @angular/common/http à la place, se référer CHANGELOG.

Pour la version angulaire précédent de **@4.3.0, vous devriez injecter Http à partir de @angular/http, et HttpModule est pour l'importation au 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 angulaire après(inclure) 4.3.0, vous pouvez utiliser HttpClient à partir de @angular/common/http au lieu de Http à partir de @angular/http. N'oubliez pas d'importer HttpClientModule au tableau d'importation de votre NgModule en premier.

Référez-vous à la réponse de @echonax.

30
répondu Pengyy 2018-04-03 00:53:56

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

Il suffit d'importer de cette façon, 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 puis 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);
}
3
répondu Luciano Huguenin 2017-07-25 10:09:48

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

1
répondu SUNIL JADHAV 2018-01-18 08:55:33

Vous devez importer http depuis @angular/http dans votre 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');
}
0
répondu Touqeer Shafi 2017-07-20 07:20:35

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';

Qui a causé cette erreur

0
répondu LazyCreep 2018-02-08 12:13:02

Pour toute personne utilisant Ionic 3 et Angular 5, j'ai eu la même erreur et je n'ai trouvé aucune solution ici. Mais j'ai trouvé quelques étapes qui ont fonctionné pour moi.

Étapes à suivre pour reproduire:

  • npm install-g cordova ionique
  • onglets de démarrage ionique myApp
  • cd myApp
  • cd node_modules/angulaire/commun (pas de module http existe).

Ionic: (exécutez ionic info à partir d'une invite terminal/cmd), vérifiez les versions et assurez-vous qu'elles sont à jour. Vous pouvez également vérifier le versions angulaires et paquets dans le paquet.dossier json dans votre projet.

J'ai vérifié mes dépendances et mes paquets et installé cordova. Redémarré atom et l'erreur est partie. Espérons que cette aide!

0
répondu Stephen Romero 2018-03-19 19:11:07