Angular 2 HTTP "Cannot resolve all parameters for 'AppService'"

Question

I tried to import the http provider into a service, but I'm getting the following error:

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.

Here are some code snippets:

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

}

I'm trying to call a controller on the server to eventually load a JSON file into a data table. Pretty straightforward stuff, but the way I'm loading the Http modules seems to be wrong. Any help will be much appreciated.

are you using typescript compiler? if no then this would be the case http://stackoverflow.com/a/35350172/2435473 — Pankaj Parkar, Feb 12 '16 at 19:31
This should work like this. But if you don't use TypeScript but only ES6 (no type support for method parameters), you need specify additional metadata to Angular2 regarding what to inject. In this case, the @Pankaj's describes exactly how to do that ;-) — Thierry Templier, Feb 13 '16 at 09:20

score 53 · Accepted Answer · answered Feb 12 '16 at 20:01

53

Seems like you are not using typescript compiler for transpiling files to js, In that case you need to have use @Inject while injecting any dependency inside a component constructor.

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

answered Feb 12 '16 at 20:01

Pankaj Parkar

134,766
23
234
299

1

This saved my hours of time. Thanks. – Saiyaff Farouk Nov 17 '16 at 09:12
This worked!. could you tell me what is " transpiling" and how to use typescript compiler to do that – dsk Nov 25 '16 at 07:15
1

@DhananjayK rather than explaining in comments, I'd highly recommend to go through [this article](https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them) – Pankaj Parkar Nov 25 '16 at 08:10

score 25 · Answer 2 · edited Dec 18 '16 at 11:05

25

Another way to do it, which saves some typing in the future would be:

in your tsconfig.json add compilerOptions.emitDecoratorMetadata=true

example of simple tsconfig.json would be:

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

edited Dec 18 '16 at 11:05

Mohsen Sarkar

5,910
7
47
86

answered Aug 24 '16 at 15:27

Yariv Katz

1,353
1
17
24

score 0 · Answer 3 · edited Jul 14 '17 at 08:03

0

I had the same issue, and for me the problem was that i was missing import { HttpModule } from '@angular/http' in app.module.ts

edited Jul 14 '17 at 08:03

Kukic Vladimir

1,010
4
15
22

answered Jul 13 '17 at 20:09

Leonardo López

1

score 0 · Answer 4 · answered Sep 06 '19 at 22:52

0

Another possible solution is that you are missing some polyfills. Anyone who had no luck with another answers should try to add this polyfill:

import 'core-js/es7/reflect';

answered Sep 06 '19 at 22:52

sinedsem

5,413
7
29
46

Angular 2 HTTP "Cannot resolve all parameters for 'AppService'"

4 Answers4

Linked