CustomLoader: Dependency Injection relying on Ionic (Platform)

I’m submitting a … (check one with “x”)

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[x] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior I am sure I am missing something obvious. I am attempting to set up my own CustomLoader in use in an Ionic 2 app.

The CustomLoader is a little complex in that the loader relies on Cordova/Ionic for the File plugin in order to load a downloaded file we write to.

Essentially the app downloads a language pack which we can use to update translations - but I am writing the loader so it detects if there is a translation present, and to use that.

I have provided the dependency via the deps array:

imports: [
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: createMyTranslateLoader,
      deps: [MyStorageProvider]
    }),
  ]

MyLoader has a dependency of MyStorageProvider:

class MyLoader implements TranslateLoader {
  constructor(private storage: MyStorageProvider) {
  }

  getTranslation(lang: string): Observable<any> {
    return this.storage.getTranslations();
  }
}

And MyStorageProvider has some dependencies as follows:

import { Platform } from 'ionic-angular';
import { File } from 'ionic-native';

export class MyStorageProvider {

  constructor(private platform: Platform) {
  }

  getTranslations(): Observable<any> {
    ...
  }

}

I am getting the standard Angular 2 error: No provider for MyStorageProvider!.

Normally this is fine, but the fact it’s a root module relying on another root module, makes me think it cannot be done, but my limited knowledge of Angular 2’s inner depths, I’m not sure.

Expected/desired behavior To be able to Inject the Ionic library into a Custom Loader.

Please tell us about your environment:

• ng2-translate version: 4.2.0

• Angular version: 2.2.1

• Browser: [all]

• Language: [TypeScript 2.0.10]

[kelvindart]

Ace - thanks @SamVerschueren!

[SamVerschueren]

In order to make sure that the plugins are loaded in my Cordova application, I use this self-written service for that.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';

@Injectable()
export class CordovaService {

	private ready$: Observable<boolean>;

	constructor() {
		this.ready$ = new Observable((observer: Observer<boolean>) => {
			document.addEventListener('deviceready', () => {
				observer.next(true);
				observer.complete();
			}, false);
		}).share();
	}

	ready() {
		return this.ready$;
	}
}

Works fine for me.

@Injectable()
export class MyService {

	constructor(
		private cordova: CordovaService
	) { }

	foo() {
		return this.cordova.ready().map(() => ...);
	}
}

Not sure if it could help you, but just wanted to share.