Ionic2 Not able to call angular service


#1

I have this page tag-navigation-p1.js

    import {Modal, NavController, Page, Events, Platform, NavController, NavParams, ViewController} from 'ionic-framework/ionic';
    import {TagNavigationPage2} from '/home/manish/Softwares/cordova/mobapp/app/pages/tag-navigations/tag-navigation-p2';
    import {TagNavigationService} from '/home/manish/Softwares/cordova/mobapp/app/pages/tag-navigations/tag.navigation.service';
    
    @Page({
      templateUrl: 'build/pages/tag-navigations/tag-navigation-p1.html',
    
    })
    export class TagNavigationPage1 {
      constructor(
          platform: Platform,
          params: NavParams,
          viewCtrl: ViewController,
          public nav: NavController
      ) {
       
    
      }
    
      dismiss() {
        this.viewCtrl.dismiss();
      }
    
      nextPage() {
        debugger
        TagNavigationService.getHeroes()
                             .subscribe(
                               error =>  this.errorMessage = <any>error);    
        this.nav.push(TagNavigationPage2);
      }
    }

here is tag.navigation.service.js

    import {Injectable}     from 'angular2/core';
    import {Http, Response} from 'angular2/http';
    import {Headers, RequestOptions} from 'angular2/http';
    import {Observable}     from 'rxjs/Observable';
    
    @Injectable()
    export class TagNavigationService {
      constructor (private http: Http) {}
    
      private _heroesUrl = 'app/heroes';  // URL to web api
    
      getHeroes () {
        console.log("get heros called");
        return this.http.get(this._heroesUrl)
                        .do(data => console.log(data))
                        .catch(this.handleError);
      }
    
      private handleError (error: Response) {
        console.log("get heros error called");
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
      }
    }

when i call getHeros() from nextPage() i am getting this error:

    Uncaught EXCEPTION: Error during evaluation of "click"
    ORIGINAL EXCEPTION: TypeError: tag_navigation_service_1.TagNavigationService.getHeroes is not a function
    ORIGINAL STACKTRACE:
    TypeError: tag_navigation_service_1.TagNavigationService.getHeroes is not a function
        at TagNavigationPage1.nextPage (file:///android_asset/www/build/js/app.bundle.js:62368:56)
        at AbstractChangeDetector.ChangeDetector_TagNavigationPage1_0.handleEventInternal (viewFactory_TagNavigationPage1:47:33)
        at AbstractChangeDetector.handleEvent (file:///android_asset/www/build/js/app.bundle.js:14048:30)
        at AppView.triggerEventHandlers (file:///android_asset/www/build/js/app.bundle.js:18355:37)
        at eval (viewFactory_TagNavigationPage1:287:124)
        at file:///android_asset/www/build/js/app.bundle.js:33426:37
        at file:///android_asset/www/build/js/app.bundle.js:32803:87
        at Zone.run (file:///android_asset/www/build/js/app.bundle.js:2258:25)
        at Zone.run (file:///android_asset/www/build/js/app.bundle.js:17599:43)
        at NgZone.run (file:///android_asset/www/build/js/app.bundle.js:17547:41)
    ERROR CONTEXT:
    [object Object]

i was following this http://plnkr.co/edit/y28jDxbuxCyLLH0rFjj2?p=options


#2

you need to add TagNavigationService to providers as such:

@Page({
templateUrl: ‘build/pages/tag-navigations/tag-navigation-p1.html’,
providers:[TagNavigationService] <= here
})