web-dev-qa-db-fra.com

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

Je suis ceci tutoriel fondamental sur Angular à propos de Http.

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

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

Lorsque j'essaie cela dans mon projet, le message d'erreur suivant s'affiche: "Impossible de trouver le module '@ angular/common/http'".

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

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

Et puis ma section des importations:

imports: [
    HttpModule
],

Le problème est maintenant, je ne peux pas injecter ce HttpModule dans mon objet service et j'obtiens le message d'erreur suivant: "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 mal?

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

angularnode-modules
53
monstertjie_za

Important : HttpClientModule est pour Angular 4.3.0 et supérieur. Vérifiez @ Maximus ' commentaires et @ Pengyy réponse pour plus d'informations.

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 change

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, depuis que 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'informations sur les différences entre HttpModule et HttpClientModule, vérifiez cette réponse: https://stackoverflow.com/a/45129865/570629

47
eko

Mise à jour importante:

HttpModule et Http de @angular/http a été déconseillé depuis Angular V5 , devrait être en utilisant HttpClientModule et HttpClient de @angular/common/http à la place, reportez-vous à CHANGELOG.

Pour Angular version précédente de ** @ 4.3.0 , vous devez injecter Http de @angular/http et HttpModule est destiné à l'importation sur le tableau d'importation de votre NgModule.

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

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

Injecter http au composant ou au service

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

constructor(private http: Http) {}

Pour Angular version après (include) 4.3.0 , vous pouvez utiliser HttpClient à partir de @angular/common/http à la place. de Http de @angular/http. N'oubliez pas d'importer d'abord HttpClientModule sur le tableau d'importation de votre NgModule.

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

35
Pengyy

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

Importez simplement de cette manière, 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);
}
4
Luciano Huguenin

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

1
LazyCreep

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

1
SUNIL JADHAV

Pour ceux qui utilisaient Ionic 3 et Angular 5, le même message d'erreur s'affichait et je n'ai trouvé aucune solution ici. Mais j'ai trouvé des étapes qui ont fonctionné pour moi.

Étapes à suivre pour reproduire:

  • npm installer -g cordova ionic
  • début ionique onglets myApp
  • cd myApp
  • cd node_modules/angular/common (il n’existe pas de module http).

ionique: (exécutez ionic informations à partir d'un terminal/invite cmd), vérifiez les versions et assurez-vous qu'elles sont à jour. Vous pouvez également vérifier les versions et les packages angular dans le dossier package.json de votre projet.

J'ai vérifié mes dépendances et mes paquets et installé Cordova. Redémarré atom et l'erreur a disparu. J'espère que cela t'aides!

0
Stephen Romero

Ce problème est-il résolu?.

Je reçois cette erreur: ERREUR dans node_modules/ngx-restangular/lib/ngx-restangular-http.d.ts (3,27): erreur TS2307: impossible de trouver le module '@ angulaire/commun/http/src/réponse'.

Après la mise à jour de mon angular vers la version = 8

0
user3639041

Vous devez importer http de @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
Touqeer Shafi

Reportez-vous à ceci: http: deprecate @ angular/http en faveur de @ angular/common/http.

0
Jazeb_007