Errore di iniezione: impossibile risolvere tutti i parametri

Question

Viene visualizzato questo errore durante il tentativo di immettere il servizio Http nel mio PanelsService.

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

export class PanelsService { 

    constructor(public http:Http) { } 

    getPanelFilters() { 
    var url = '../../data/panelFilters/' + 13677 + '.json' 

    return this.http.get(url) 
    } 

} 

Sto tentando di accedere al PanelsService dal mio SidebarComponent:

import {PanelsService} from '../panels/panels.service'; 

@Component({ 
    .... 
    providers: [PanelsService] 
}) 

export class SidebarComponent implements OnInit { 

    constructor(public panelsService:PanelsService) { } 

    ngOnInit() { 
    console.log('I am the sidebar component'); 
    } 

} 

Va notato che il mio tsconfig.json ha anche le linee:

"emitDecoratorMetadata": true, 
"experimentalDecorators": true, 

Ho provato con @Injectable come dimostrato here ma quando decorare la mia classe con @Injectable() ottengo un errore nei contro ole:

boot.js bootstraps semplicemente il mio componente app, non iniettare tutte le dipendenze:

import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from './components/app.component'; 

bootstrap(AppComponent).catch(err => console.error(err)); 

Qualsiasi aiuto sarebbe apprezzato.

Answer 1

C'è una cosa che manca nel codice: Provider.

Con

export class PanelsService { 

    constructor(public http:Http) { } 
} 

di chiedere una dipendenza che l'iniettore si identifica con il token Http (il tipo di annotazione). Tuttavia, non c'è nulla nel codice (almeno come mostrato qui), che dice al tuo iniettore che cosa deve restituire per il token Http. Quindi è solo metà delle informazioni.

Per risolvere una dipendenza, abbiamo bisogno di un token (la cosa che stiamo chiedendo) e di un provider (la cosa che crea quell'oggetto che chiediamo). Il provider può essere configurato durante il bootstrap() o a livello di componente utilizzando la proprietà providers nel decoratore @Component().

A meno che non si desideri creare una nuova istanza di Http ogni volta, è più che opportuno configurare tale provider su bootstrap() per rendere disponibile la stessa istanza nell'intera applicazione.

Ecco cosa un provider per Http potrebbe apparire come:

import {provide} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {Http} from 'angular2/http'; 

bootstrap(YourApp, [ 
    provide(Http, {useClass: Http}) 
]); 

provide() prende un gettone Http e configura un provider con una ricetta che descrive come creare un oggetto di qualcosa (useClass: Http). Se la ricetta è useClass e la classe è lo stesso che il token, possiamo usare la seguente sintassi abbreviata:

bootstrap(YourApp, [ 
    Http 
]); 

Tuttavia, ci rendiamo conto che questo non è sufficiente, dal momento che si scopre che Http utilizza DI stesso per le sue stesse dipendenze. Il che significa che abbiamo bisogno di fornitori anche per queste dipendenze. Fortunatamente, per questi casi Angular fornisce già un elenco predefinito di provider.

HTTP_PROVIDERS è una raccolta di configurazioni del provider necessarie per rendere operativo Http. Quindi tutto quello che dovete fare è:

import {HTTP_PROVIDERS} from 'angular2/http'; 

bootstrap(YourApp, [HTTP_PROVIDERS]); 

Ora la vostra applicazione conosce tutte le dipendenze, gettoni e fornitori per qualsiasi cosa Http.

È possibile trovare una spiegazione più dettagliata in questo article.