JS: Error creating Loading Indicator Pop Over: Cannot read property 'getResources' of undefined

[namikarif]

Which platform(s) does your issue occur on?

-Android

• emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: 8.0.2
• Cross-platform modules: 8.0.8
• Plugin(s): ^4.1.0

Please, tell us how to recreate the issue in as much detail as possible.

export class LoadingService {
indicator: LoadingIndicator;

constructor() {
    this.indicator = new LoadingIndicator();
}

showLoading(text: string, details: string = '') {
    const options: OptionsCommon = {
        message: text,
        details: details,
        progress: 0.65,
        margin: 10,
        dimBackground: true,
        color: '#4B9ED6',
        backgroundColor: 'yellow',
        userInteractionEnabled: false,
        hideBezel: true,
        mode: Mode.AnnularDeterminate,
        android: {
            cancelable: true,
            cancelListener: function (dialog) {
                console.log('Loading cancelled');
            },
        },
        ios: {
            square: false,
        },
    };

    this.indicator.show(options);

}

hide(): void {
    this.indicator.hide();
}

}

[bradmartin]

The most likely cause is your service is being created too early in the life cycle of the app, so the native call into the android Resources with .getResources() in the source of this plugin crashes. I'd suggest delaying the constructor of the LoadingIndicator() somehow. Either a method in your service maybe like

public indicator: LoadingIndicator;
init() { 
  this.indicator = new LoadingIndicator();
  }

Then on your app start, maybe the logic of the first component or after bootstrap, call your service.init() method and that should help. Hope this makes sense :)