asp.net web api - Issue while calling web api controller from service in angular2 -

i doing angular quick start tutorial. hero tutorial specifies in angular2 quickstart on website. runs fine me. binds static array data , perform crud. want learn how call web api method getting data database.

so calling webapi method in getheroes() method of service , calling method init method-ngoninit() of component gives error this. please correct if wrong.

got error, while calling web api controller service in angular2

exception:

error: uncaught (in promise): no provider http! (dashboardcomponent -> heroservice -> http)browserdomadapter.logerror @ angular2.dev.js:23925 angular2.dev.js:23925 stacktrace:browserdomadapter.logerror @ angular2.dev.js:23925 angular2.dev.js:23925 error: uncaught (in promise): no provider http! (dashboardcomponent -> heroservice -> http)     @ resolvepromise (angular2-polyfills.js:602)     @ angular2-polyfills.js:579     @ zonedelegate.invoke (angular2-polyfills.js:390)     @ object.ngzoneimpl.inner.inner.fork.oninvoke (angular2.dev.js:2126)     @ zonedelegate.invoke (angular2-polyfills.js:389)     @ zone.run (angular2-polyfills.js:283)     @ angular2-polyfills.js:635     @ zonedelegate.invoketask (angular2-polyfills.js:423)     @ object.ngzoneimpl.inner.inner.fork.oninvoketask (angular2.dev.js:2118)     @ zonedelegate.invoketask (angular2-polyfills.js:422)browserdomadapter.logerror @ angular2.dev.js:23925 angular2-polyfills.js:528 unhandled promise rejection: no provider http! (dashboardcomponent -> heroservice -> http) ; zone: angular ; task: promise.then ; value: noprovidererrorconsoleerror @ angular2-polyfills.js:528 angular2-polyfills.js:530 error: uncaught (in promise): no provider http! (dashboardcomponent -> heroservice -> http)(…)consoleerror @ angular2-polyfills.js:530 

here hero service:

    import {injectable} 'angular2/core';     import {http,response,headers} 'angular2/http';     import 'rxjs/add/operator/map'     import {observable} 'rxjs/observable';     import {hero} '/scripts/firstex_ts/hero.ts';     import {heroes} '/scripts/firstex_ts/mockheros.ts';       @injectable()    export class heroservice {       private headers: headers;      constructor(private _http:http) {    }   getheroes(){    return      this._http.get("http://localhost:54046/api/heromanage/getallheroes")        .map((response: response) => <hero[]>response.json())        .catch(this.handleerror);  }  getheroesslowly() {    return new promise<hero[]>(resolve =>        settimeout(() => resolve(heroes), 2000) // 2 seconds        );  }   gethero(id: number) {    return promise.resolve(heroes).then(        heroes => heroes.filter(hero => hero.id === id)[0]        ); }    private handleerror(error: response) {    console.error(error);    return observable.throw(error.json().error || 'server error');  }  }  

and here component calling service method:

import {component, oninit} 'angular2/core'; import {http,response,headers} 'angular2/http'; import { core_directives } 'angular2/common'; import {router} 'angular2/router'; import {hero} '/scripts/firstex_ts/hero.ts'; import {heroservice} '/scripts/firstex_ts/heroservice.ts';  @component({ selector: 'my-dashboard', providers: [heroservice], templateurl: '/templates/dashboardcomponent.html', directives: [core_directives], styles: [ ` [class*='col-'] {  float: left; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  } h3 {  text-align: center; margin-bottom: 0;  } [class*='col-'] {  padding-right: 20px;  padding-bottom: 20px;  }   [class*='col-']:last-of-type {   padding-right: 0;   }   .grid {   margin: 0;    }   .col-1-4 {    width: 25%;   }    .module {     padding: 20px;    text-align: center;    color: #eee;   max-height: 120px;   min-width: 120px;   background-color: #607d8b;   border-radius: 2px;     }  h4 {    position: relative;   }   .module:hover {     background-color: #eee;     cursor: pointer;       color: #607d8b;   }  .grid-pad {    padding: 10px 0;   }   .grid-pad > [class*='col-']:last-of-type {    padding-right: 20px;    }  @media (max-width: 600px) { .module {   font-size: 10px;   max-height: 75px; }   }    @media (max-width: 1024px) {   .grid {   margin: 0;     }    .module {   min-width: 60px;    }    }  `]   })  export class dashboardcomponent implements oninit { heroes: hero[] = []; constructor(     private _router: router,     private _heroservice: heroservice) { debugger;  } **ngoninit() {     alert('hi');     debugger;      this._heroservice         .getheroes()         .subscribe((heroes:hero[]) => this.heroes = data,             error => console.log(error),             () => console.log('get items complete')); }** gotodetail(hero: hero) {     let link = ['herodetail', { id: hero.id }];     this._router.navigate(link);   }    } 

you may try below,

angular version < rc5

include http_providers in providers array of component metadata.

angular version >= rc5

import httpmodule in module containing component.

hope helps!!