Problems with inject in service

Question

I have a Angular2 application, where I created a service. Now I would like to extend the service to fetch some data from a web API. I have followed the developer guide from the angular team: https://angular.io/docs/ts/latest/guide/server-communication.html

read this fine guide about injecting a service: http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html

But i keep getting the same error:

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

I have added both provides in the boostrap:

import "zone.js/dist/zone.min.js";
import "reflect-metadata";
import 'rxjs/Rx';
import { HTTP_PROVIDERS }    from 'angular2/http';
import { bootstrap } from "angular2/platform/browser";
import { UserService } from '../userservice';
import { PublicappComponent } from './publicapp.component';

bootstrap(PublicappComponent, [HTTP_PROVIDERS, UserService]);

And this is my simple UserService.ts:

import {Injectable}     from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Observable}     from 'rxjs/Observable';
import {Headers, RequestOptions} from 'angular2/http';
import {UserModel}      from './usermodel';

@Injectable()
export class UserService {
    constructor(http: Http) { }
    private url = 'api/user';
}

I am using jspm around Angular2.

Thierry Templier Thierry Templier · Accepted Answer · 2016-02-24T14:37:00

Do you include the http.dev.js file in your HTML entry file:

(...)
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/http.dev.js"></script>

Edit

Since Jspm allows to implement ES6-based Angular2 applications (not TypeScript), you can't use types of the level of method parameters. So you need to add a static getter for the parameters field:

@Injectable()
export class UserService {
  private url = 'api/user';

  constructor(http) { }

  static get parameters() {
    return [[Http]];
  }
}

See this plunkr for more details: https://plnkr.co/edit/ymSUUCvG5NFvmCGqzj2r?p=preview

Problems with inject in service

1 Answers