services - import service angular

Al inyectar http en un servicio, se produce el error "No hay proveedor para Http!"

Question

Versión angular: 2.0.0-beta.13

Estoy tratando de inyectar http en un servicio:

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

He enumerado HTTP_PROVIDERS como proveedor en el componente raíz de mi aplicación, por lo que este proveedor debería estar disponible para cualquier componente en mi aplicación:

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

Sin embargo, cuando ejecuto esta aplicación, obtengo el siguiente error:

EXCEPCIÓN: Error: No detectado (en promesa): ¡No hay proveedor para Http! (HttpReqComponent -> GithubService -> Http)

¿Qué estoy haciendo mal?

Editar

¡Cambié de providers a viewProviders y ahora el error desapareció!

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

Sin embargo, no puedo explicar por qué esto está funcionando. No se accede a http directamente por ninguna vista. Solo se accede dentro de GithubService . Entonces, ¿por qué tengo que declarar HTTP_PROVIDERS como viewProvider ?

Editar 2

Bueno, cambié la declaración de providers de AppComponent al componente donde lo necesito y ¡ahora funciona! Por lo tanto, debe haber alguna peculiaridad en declararlo en el nivel raíz.

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

En realidad, tanto los providers como viewProviders funcionan. Resulta que viewProviders es en realidad más restrictivo y proporciona una mejor encapsulación del componente. Vea este artículo para más detalles.

Answer 1

A partir de 2.0.0-rc.5 esto es ahora:

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


@NgModule({
  imports: [
    HttpModule
  ]}

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

Answer 2

Está bien si va con Providers:[HTTP_PROVIDERS] pero es bueno HTTP_PROVIDERS a HTTP_PROVIDERS a bootstrap() . No necesita usar viewProvider , está ahí para algún otro propósito.

debe asegurarse de que se haya incluido http.dev.js (a través de CDN / node_modules).

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

Entonces en 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)

Luego en GithubService ,

import {Http} from ''angular2/http'';

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

Answer 3

Puede importar { HttpModule } en un módulo que tiene su componente declarado, en el que está utilizando un servicio inyectable, dado que el módulo no está cargado de forma perezosa.

Answer 4

Siguiendo este enlace

Angular2 / http Exception no ConnectionBackend La respuesta de @abreneliere es correcta para mí mientras trabajaba con Angular 2 Quickstart ( https://angular.io/guide/quickstart ) y estaba intentando agregar un servicio a un componente.

La respuesta: Archivo: app.module.ts Código:

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 { }