web-dev-qa-db-fra.com

Angular 2 HTTP "Impossible de résoudre tous les paramètres pour 'AppService'"

J'ai essayé d'importer le fournisseur http dans un service, mais le message d'erreur suivant s'affiche:

Impossible de résoudre tous les paramètres pour 'AppService' (?). Assurez-vous que tous les paramètres sont décorés avec Inject ou ont des annotations de type valides et que 'AppService' est décoré avec Injectable.

Voici quelques extraits de code:

<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());
    }

}

J'essaie d'appeler un contrôleur sur le serveur pour éventuellement charger un fichier JSON dans une table de données. C'est assez simple, mais la façon dont je charge les modules Http semble être fausse. Toute aide sera très appréciée.

typescriptangularsystemjsangular2-servicesangular2-injection
26
ddpdoj

On dirait que vous n'utilisez pas le compilateur TypeScript pour la transcription de fichiers en js. Dans ce cas, vous devez utiliser @Inject lors de l'injection d'une dépendance dans un constructeur de composant.

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());
    }
}
53
Pankaj Parkar

Une autre façon de le faire, ce qui évite de taper à l'avenir, serait:

dans votre tsconfig.json ajouter compilerOptions.emitDecoratorMetadata=true 

exemple de simple tsconfig.json serait:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  }
}
25
Yariv Katz

J'ai eu le même problème, et pour moi le problème était qu'il me manquait import { HttpModule } from '@angular/http' dans app.module.ts

0
Leonardo López