在Ionic 2中将服务注入另一个服务

Question

I'm starting with Ionic 2 and I had a problem straight away. I'm doing some tests trying to replicate an Angular 2 application already working.

The problem comes when I try to use a service inside another service.

I have a data.service.ts which uses Http service and provides a little extra functionality, and this service will be used by all my other specialized services.

So this is data.service.ts

import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';

import { Observable } from 'rxjs/Rx';

@Injectable()
export class DataService {

  constructor(private http:Http) {
  }

  getJson(url: string, update: number) {
    if (update !== -1) {
      return Observable.timer(0, update)
        .flatMap(() => this.http.get(url))
        .map(response => response.json());
    } else {
      return this.http.get(url)
        .map(response => response.json());
    }
  }

}

And this is another service, schedules.service.ts, which basically uses data.service.ts to get some json file and do some stuff on the data recovered.

import { Injectable } from '@angular/core';

import { Observable } from "rxjs/Rx";

import { DataService } from './data.service';

@Injectable()
export class SchedulesService {

  // this will be changed with Constants.ts  
  private DATA_PATH = '/resources';
  private UPDATE_INTERVAL_DATA = 120000;

  //private schedules: Schedule[];
  private schedules: any[];
  private url = `//localhost${ this.PATH }/data.json`;

  constructor(
    private dataService: DataService) {
  }

  loadSchedules() {
    return this.dataService
      .getJson(this.url, this.UPDATE_INTERVAL_DATA)
      .map(data => {
        return data.schedules.list.map(item => {
          // do some stuff..
          return item;
        });
      });
  }

}

Now, in my Angular 2 app this is working, because I'm using modules, and in the module for the schdules I'm also importing a sharedModule, which contains DataService.

@NgModule({
  imports: [ 
    routing,
    SharedModule.forRoot()
  ],
  declarations: [
    //...
  ],
  providers: [ SchedulesService ]
})
export class SchedulesModule { }

and sharedModule

@NgModule({
  imports: [ 
    CommonModule,
    HttpModule
  ],
  declarations: [ 
    //...
  ],
  exports: [
    //...
  ]
})
export class SharedModule {

  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [ 
        DataService
      ]
    };
  }
}

BUT, in Ionic 2 I'm not using modules and when I try to use execute my previous code I get a TypeError: Cannot read property 'get' of undefined

The line with the error is this one:

return this.http.get(url)
            .map(response => response.json());

I'm guessing the Http is undefined because is not instantiated, and that might be because is not being injected in the ScheduleService. Is that correct? Any idea on how to fix this?

EDIT. Ok, a few things I was missing. The home.ts which is using the SchedulesService actually has the DataService in the providers attribute of the @Component, so I think thi is working fine and the issue should not be related to the injection. Any idea?

@Component({
  templateUrl: 'build/pages/home/home.html',
  providers: [ SchedulesService, DataService ]
})
export class HomePage {

  private schedules: any[];

  constructor(
    private schedulesService: SchedulesService,
    private commonCodesService: CommonCodesService,
    private dataService: DataService) {
  }

  getSchedules() {
    ...
    this.schedulesService
              .loadSchedules()
              .subscribe(() => this.updateSchedules());
   ...
  }
  ...

Answer 1

I had a similar (or even the same?) problem when working on my Ionic 2 app. It created a new instance of the shared service every time I used it in another provider.

Seems like I just had to remove it from providers in my app.components.ts:

@Component({
    templateUrl: 'app.html',
    providers: [], 
})

For more information you can see my forum post in the ionic forum: https://forum.ionicframework.com/t/shared-service-in-other-provider/72499/3

Hope this helps!