Why is Ionic 3 ion-loader throwing removeView error / not showing when dismiss/present checks in place

Question

I am using an ion-loading component which works fine the first time the view is accessed and the loader is presented and dismissed.

import { AlertController, LoadingController } from 'ionic-angular';
constructor(
    public zone: NgZone,
    public loadingCtrl: LoadingController,
    public alertCtrl: AlertController,
    private storage: Storage,
    public navCtrl: NavController
  ) {
this.loading = this.loadingCtrl.create();
}

tryGeolocation() {
this.loading.present();
//misc code
 this.markers.push(marker);
      this.map.setCenter(pos);
      //if(this.loading){
      this.loading.dismiss();
}

However when I navigate back to the view and the loader is again presented I get a error:

Error: Uncaught (in promise): removeView was not found

I have tried to followe the advice here and introduced checks to see if loader has been dismissed but now the loader never comes into view:

if (this.loading == null){
          console.log("Map.ts: Presenting loader.");
          this.loading.present();
        }
    if (this.loading != null){
          console.log("Map.ts: Dismissing loader.");
          this.loading.dismiss();
        }

I am using ionic 3.9.9, angular 5.2.11 Any input appreciated.

Answer 1

Seems to be allot of different solutions out there depending on the context, for me the solution was to move the loader create call from the module constructor to the method calling present and dismiss:

tryGeolocation() {...
     this.loading = this.loadingCtrl.create();
     this.loading.present();
     //some code
     this.loading.dismiss();   
}