Using HTTP Angular

Question

I'm trying to make a simple HTTP request using Angular, but I keep getting this error:

Property 'http' does not exist on type 'WorksService'.

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

export class Work {

  constructor(public id: number, public name: string) { }

}


@Injectable()
export class WorksService {

 constructor (private http: Http) {}

 private _WorksUrl = 'api/projects';  // URL to web api

 getHeroes () {
  return this.http.get(this._WorksUrl)
                .map(res => <Work[]> res.json().data)
                .catch(this.handleError);
 }
 private handleError (error: Response) {
   // instead of just logging it to the console
   console.error(error);
   return Observable.throw(error.json().error || 'Server error');
  }
}

How are you creating WorksService? Where does the object come from? — poke
– poke, Commented Mar 23, 2016 at 21:48

Thierry Templier · Accepted Answer · 2016-03-24 08:53:12Z

1

I guess that you instantiate the service by your own. You need to get it through dependency injection so Angular2 will provide the http instance directly.

To do that, just add the service in providers either when bootstrapping your application or within the providers attribute of the component that uses the service (directly or indirectly).

bootstrap(AppComponent, [ HTTP_PROVIDERS, WorksService ]);

or

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

(...)

@Component({
  (...)
  providers: [ WorksService ]
})
export class SomeComponent {}

To inject it then, you do like this:

@Component({
  (...)
})
export class SomeComponent {
  constructor(private service WorksService) {
    this.service.getHeroes().subscribe(
      (data) => {
        (...)
      });
  }
}

edited Mar 24, 2016 at 8:53

answered Mar 23, 2016 at 22:00

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using HTTP Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related