web-dev-qa-db-fra.com

Injecter http dans un service donne "Aucun fournisseur pour Http!" Erreur

Version angulaire: 2.0.0-beta.13

J'essaie d'injecter http dans un service:

@Injectable()
export class GithubService {
    ...
    constructor(private http: Http) {
    }
}

J'ai énuméré HTTP_PROVIDERS en tant que fournisseur dans le composant racine de mon application, ce fournisseur doit donc être disponible pour tous les composants de mon application:

@Component({
  providers: [HTTP_PROVIDERS],
})
export class AppComponent {}

Cependant, lorsque j'exécute cette application, l'erreur suivante apparaît:

EXCEPTION: Erreur: Non capturé (promis): Aucun fournisseur pour Http! (HttpReqComponent -> GithubService -> Http)

Qu'est-ce que je fais mal?

Modifier

J'ai changé providers en viewProviders et l'erreur est maintenant disparue!

@Component({
  viewProviders: [HTTP_PROVIDERS],
})
export class AppComponent {}

Cependant, je ne peux pas expliquer pourquoi cela fonctionne. http n'est directement accessible par aucune vue. Il est uniquement accessible à l'intérieur de GithubService. Alors pourquoi dois-je déclarer HTTP_PROVIDERS comme viewProvider?

Éditer 2

Eh bien, j'ai déplacé la déclaration providers de AppComponent vers le composant où j'en ai besoin et maintenant cela fonctionne! Donc, il doit y avoir une bizarrerie dans la déclaration au niveau racine.

@Component({
    providers: [HTTP_PROVIDERS, GithubService],
})
export class HttpReqComponent { }

En fait, providers et viewProviders fonctionnent tous les deux. Il s'avère que viewProviders est en réalité plus restrictif et offre une meilleure encapsulation du composant. Voir cet article pour plus de détails.

angularangular2-services
21
Naresh

Ce n'est pas grave si vous y allez avec Providers:[HTTP_PROVIDERS], Mais il est bon de référencer HTTP_PROVIDERS Dans bootstrap(). Vous n'avez pas besoin d'utiliser viewProvider, il est là pour un autre but.

vous devez vous assurer que http.dev.js a été inclus (via CDN/node_modules).

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.13/http.dev.js"></script>

Puis dans rootComponent,

import {HTTP_PROVIDERS} from 'angular2/http';
import {GithubService} from './GithubService';

bootstrap(rootComponent,[HTTP_PROVIDERS,GithubService]);

// if you reference HTTP_PROVIDERS here globally (in bootstrap), you don't require to use providers:[HTTP_PROVIDERS] in any component. 
// same way GithubService reference has been passed globally which would create single instance of GithubService (In case if you want)

Puis dans GithubService,

import {Http} from 'angular2/http';

@Injectable()
export class GithubService {
    ...
    constructor(private http: Http) {  // this will work now without any error
    }
}
12
micronyks

Suivre ce lien

Angular2/http Exception no ConnectionBackend La réponse de @abreneliere m'est correcte lorsque je travaille avec Angular 2 Quickstart ( https://angular.io/ guide/quickstart ) et j'essayais d'ajouter un service à un composant.

La réponse: Fichier: app.module.ts Code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from "@angular/http";
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, HttpModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
20
SoProgram

À partir de 2.0.0-rc.5 c'est maintenant:

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


@NgModule({
  imports: [
    HttpModule
  ]}

https://angular.io/docs/ts/latest/guide/server-communication.html

11
nikk wong

Vous pouvez importer { HttpModule } dans un module dans lequel votre composant est déclaré, dans lequel vous utilisez le service injectable, car le module n'est pas chargé paresseux.

0
Jassi