How to Inject a service at export function in app.module.ts file


#1

I use the plug-in ng2-restangular.
I made the plug-in setting to export function when importing the restangular module from “app.module.ts”.
I am trying to use the service I made by implanting it into the export function, but it doesn’t work.
Can you either let me know the way to import services into export function or let me know how to use LoadingController?

=========================== app.module.ts ===========================

import {AlertService} from “…/services/alert.service”;
import {RestangularModule} from “ng2-restangular”;

@NgModule({
declarations: [
MyApp,

],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
RestangularModule.forRoot(RestangularConfigFactory),

],
bootstrap: [IonicApp],
entryComponents: [

],
providers: [

AlertService
],
})

export function RestangularConfigFactory (RestangularProvider) {


RestangularProvider.addFullRequestInterceptor((element, operation, path, url, headers, params)=> {

_/**_

_ :disappointed_relieved::sob::sob:Use in AlertService method _
_ **/_

return {
  // params: Object.assign({}, params, {sort:"name"}),
  params: Object.assign({}, params),
  headers: headers,
  element: element
}

});


}

=======================================================================

=========================== alert.service.ts (AlertService) ======================

/**
*

  • Created by COM on 2017-08-07.
  • */

import {Injectable} from “@angular/core”;
import {AlertController, LoadingController, ToastController} from “ionic-angular”;

@Injectable()
export class AlertService{
private toast: any;
private alert: any;
private loading: any;

constructor(
private toastCtrl: ToastController,
private alertCtrl: AlertController,
private loadingCtrl: LoadingController ) {

  console.log("AlertService Init");

}

// Toast 창 띄우기
alertToast = (message: string, time: number)=> {

let options:{[k: string]: any} = {};

if (time == undefined) { time = 2000; }
options.message = message;
options.duration = time;
options.position = 'top';

this.toast = this.toastCtrl.create(options).present();

}

// Loading
showLoading = (message: string, time: number) => {
let options:{[k: string]: any} = {};
options.content = message;
this.loading = this.loadingCtrl.create(options);
this.loading.present();

if (time > 0) {
  setTimeout(
    ()=> { this.loading.dismiss(); }, time);
}

}

hideLoading = () => {
if (this.loading != undefined){
this.loading.dismiss();
}
}

}


#2

Hi, @LEEMINKYU

If it is not working, are you getting any error in this code ?

Thanks,


#3

add source code in export function

  1. AlertService

//
let alertService: AlertService;
alertService.showLoading(“Loading…”, 2000);
//

Error Message:

Runtime Error
Uncaught (in promise): TypeError: Cannot read property ‘showLoading’ of undefined TypeError: Cannot read property ‘showLoading’ of undefined at Object.RestangularConfigFactory [as fn] (://localhost:8102/build/main.js:2842:17) at Restangular.setDefaultConfig (://localhost:8102/build/vendor.js:89946:34) at new Restangular (://localhost:8102/build/vendor.js:89936:14) at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:199:67) at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:758:51) at AppModuleInjector.NgModuleInjector.get (://localhost:8102/build/vendor.js:3937:44) at resolveDep
(://localhost:8102/build/vendor.js:11399:45) at createClass
(://localhost:8102/build/vendor.js:11263:32) at createDirectiveInstance (://localhost:8102/build/vendor.js:11083:37) at createViewNodes (://localhost:8102/build/vendor.js:12446:49)
Stack
Error: Uncaught (in promise): TypeError: Cannot read property ‘showLoading’ of undefined
TypeError: Cannot read property ‘showLoading’ of undefined
at Object.RestangularConfigFactory [as fn] (://localhost:8102/build/main.js:2842:17)
at Restangular.setDefaultConfig (://localhost:8102/build/vendor.js:89946:34)
at new Restangular (://localhost:8102/build/vendor.js:89936:14)
at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:199:67)
at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:758:51)
at AppModuleInjector.NgModuleInjector.get (://localhost:8102/build/vendor.js:3937:44)
at resolveDep (://localhost:8102/build/vendor.js:11399:45)
at createClass (://localhost:8102/build/vendor.js:11263:32)
at createDirectiveInstance (://localhost:8102/build/vendor.js:11083:37)
at createViewNodes (://localhost:8102/build/vendor.js:12446:49)
at c (://localhost:8102/build/polyfills.js:3:13535)
at Object.reject (://localhost:8102/build/polyfills.js:3:12891)
at NavControllerBase._fireError (://localhost:8102/build/vendor.js:47401:16)
at NavControllerBase._failed (://localhost:8102/build/vendor.js:47389:14)
at://localhost:8102/build/vendor.js:47444:59
at t.invoke (://localhost:8102/build/polyfills.js:3:9283)
at Object.onInvoke (://localhost:8102/build/vendor.js:4509:37)
at t.invoke (://localhost:8102/build/polyfills.js:3:9223)
at r.run (://localhost:8102/build/polyfills.js:3:4452)
at://localhost:8102/build/polyfills.js:3:14076

  1. ToastController
    //
    let loadingCtrl: LoadingController;
    let options:{[k: string]: any} = {};
    options.content = “loading…”;
    this.loading = this.loadingCtrl.create(options);
    this.loading.present();

setTimeout(
()=> { this.loading.dismiss(); }, 2000);
//

Error Message :
Runtime Error
Uncaught (in promise): TypeError: Cannot read property ‘create’ of undefined TypeError: Cannot read property ‘create’ of undefined at Object.RestangularConfigFactory [as fn] ("://localhost:8102/build/main.js:2847:36") at Restangular.setDefaultConfig (://localhost:8102/build/vendor.js:89946:34) at new Restangular (://localhost:8102/build/vendor.js:89936:14) at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:199:67) at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:758:51) at AppModuleInjector.NgModuleInjector.get (://localhost:8102/build/vendor.js:3937:44) at resolveDep
(://localhost:8102/build/vendor.js:11399:45) at createClass
(://localhost:8102/build/vendor.js:11263:32) at createDirectiveInstance (://localhost:8102/build/vendor.js:11083:37) at createViewNodes (://localhost:8102/build/vendor.js:12446:49)
Stack
Error: Uncaught (in promise): TypeError: Cannot read property ‘create’ of undefined
TypeError: Cannot read property ‘create’ of undefined
at Object.RestangularConfigFactory [as fn] (://localhost:8102/build/main.js:2847:36)
at Restangular.setDefaultConfig (://localhost:8102/build/vendor.js:89946:34)
at new Restangular (://localhost:8102/build/vendor.js:89936:14)
at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:199:67)
at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:758:51)
at AppModuleInjector.NgModuleInjector.get (://localhost:8102/build/vendor.js:3937:44)
at resolveDep (://localhost:8102/build/vendor.js:11399:45)
at createClass (://localhost:8102/build/vendor.js:11263:32)
at createDirectiveInstance (://localhost:8102/build/vendor.js:11083:37)
at createViewNodes (://localhost:8102/build/vendor.js:12446:49)
at c (://localhost:8102/build/polyfills.js:3:13535)
at Object.reject (://localhost:8102/build/polyfills.js:3:12891)
at NavControllerBase._fireError (://localhost:8102/build/vendor.js:47401:16)
at NavControllerBase._failed (://localhost:8102/build/vendor.js:47389:14)
at://localhost:8102/build/vendor.js:47444:59
at t.invoke (://localhost:8102/build/polyfills.js:3:9283)
at Object.onInvoke (://localhost:8102/build/vendor.js:4509:37)
at t.invoke (://localhost:8102/build/polyfills.js:3:9223)
at r.run (://localhost:8102/build/polyfills.js:3:4452)
at://localhost:8102/build/polyfills.js:3:14076


#4

IMHO it is a mistake to store loading components as object properties. Making them only lexically scoped objects eliminates many common bug vectors.


#5

Thank you very much. rapropos