23

Ho cercato di importare il fornitore http in un servizio, ma sto ottenendo il seguente errore:angolare 2 HTTP "Impossibile risolvere tutti i parametri per 'AppService'"

Cannot resolve all parameters for 'AppService'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AppService' is decorated with Injectable.

Ecco alcuni frammenti di codice:

<script src="~/es6-shim/es6-shim.min.js"></script> 
<script src="~/systemjs/dist/system-polyfills.js"></script> 

<script src="~/angular2/bundles/angular2-polyfills.js"></script> 
<script src="~/systemjs/dist/system.src.js"></script> 
<script src="~/rxjs/bundles/Rx.js"></script> 
<script src="~/angular2/bundles/angular2.dev.js"></script> 
<script src="~/angular2/bundles/http.dev.js"></script> 

<!-- 2. Configure SystemJS --> 
<script> 
    System.config({ 
     map: { 'rxjs': 'RCO/rxjs' }, 
     packages: { 
      RCO: { 
       format: 'register', 
       defaultExtension: 'js' 
      }, 
      'rxjs': {defaultExtension: 'js'} 
     } 
    }); 
    System.import('RCO/Areas/ViewOrganization/AngularTemplates/boot') 
     .then(null, console.error.bind(console)); 

boot.ts

import {bootstrap} from 'angular2/platform/browser' 
import {HTTP_PROVIDERS} from 'angular2/http' 
import 'rxjs/add/operator/map' 
import {AppComponent} from 'RCO/Areas/ViewOrganization/AngularTemplates/app.component' 
import {AppService} from 'RCO/Areas/ViewOrganization/AngularTemplates/app.service' 

bootstrap(AppComponent, [HTTP_PROVIDERS, AppService]); 

app.service.ts

import {Injectable} from 'angular2/core'; 
import {Http, Response} from 'angular2/http'; 
import {Observable} from 'rxjs/Rx'; 

@Injectable() 
export class AppService { 

    constructor(private http: Http) { } 

    // Uses http.get() to load a single JSON file 
    getTableData() { 
     return this.http.get('...').map((res: Response) => res.json()); 
    } 

} 

Sto provando a chiamare un controller sul server per caricare un file JSON in una tabella di dati. Cose piuttosto semplici, ma il modo in cui sto caricando i moduli Http sembra essere sbagliato. Qualsiasi aiuto sarà molto apprezzato.

+0

stai usando il compilatore dattiloscritto? se no, questo sarebbe il caso http://stackoverflow.com/a/35350172/2435473 –

+0

che lo ha risolto ... Grazie – ddpdoj

+1

Questo dovrebbe funzionare così. Ma se non si usa TypeScript ma solo ES6 (nessun tipo di supporto per i parametri del metodo), è necessario specificare ulteriori metadati su Angular2 riguardo a cosa iniettare. In questo caso, @ Pankaj's descrive esattamente come farlo ;-) –

risposta

49

Sembra che tu non stia utilizzando il compilatore typescript per il trasferimento di file su js, In tal caso è necessario utilizzare @Inject durante l'iniezione di qualsiasi dipendenza all'interno di un costruttore di componenti.

import {Injectable, Inject} from 'angular2/core'; 
import {Http, Response} from 'angular2/http'; 
import {Observable} from 'rxjs/Rx'; 

@Injectable() 
export class AppService { 
    constructor(@Inject(Http) private http: Http) { } 
    // Uses http.get() to load a single JSON file 
    getTableData() { 
     return this.http.get('...').map((res: Response) => res.json()); 
    } 
} 
+1

Ciò mi ha risparmiato ore di tempo. Grazie. –

+0

Questo ha funzionato !. potresti dirmi cosa è "transpiling" e come usare il compilatore typescript per fare quello – dsk

+1

@DhananjayK invece di spiegare nei commenti, ti consiglio vivamente di passare attraverso [questo articolo] (https://scotch.io/tutorials/ javascript-transpilers-what-they-are-why-we-need-them) –

23

Un altro modo per farlo, che consente di risparmiare un po 'di battitura a macchina in futuro potrebbe essere:

nel vostro tsconfig.json aggiungere compilerOptions.emitDecoratorMetadata=true

esempio di semplice tsconfig.json sarebbe:

{ 
    "compilerOptions": { 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true 
    } 
} 
+4

Questo mi ha salvato la giornata! –

0

Ho avuto lo stesso problema, e per me il problema era che mi mancava import { HttpModule } from '@angular/http' in app.module.ts

Problemi correlati