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.

Coney

are you using typescript compiler? if no then this would be the case https://mcmap.net/q/535593/-error-using-http-json-angularjs-2 – Anacoluthia

That fixed it... Thanks – Coney

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 ;-) – Tangential

Answer 1

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

Anacoluthia

This saved my hours of time. Thanks. – Sprawl

This worked!. could you tell me what is " transpiling" and how to use typescript compiler to do that – Retention

@DhananjayK rather than explaining in comments, I'd highly recommend to go through this article – Anacoluthia

Answer 2

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

Mizzenmast

Answer 3

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

Bulbar

Answer 4

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';

Rasure