import { Injectable } from '@angular/core';
import {
    HttpInterceptor,
    HttpRequest,
    HttpResponse,
    HttpHandler,
    HttpEvent,
    HttpErrorResponse
} from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { LoadingController } from '@ionic/angular';


@Injectable()
export class  SpinnerInterceptor implements HttpInterceptor {

  isLoading = false;
  loaderToShow: any;
  constructor(
    public loadingController: LoadingController
    ) { }
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      this.present();
      return next.handle(req).pipe(
                map((event: HttpEvent<any>) => {
                  this.dismiss();
                    if (event instanceof HttpResponse) {
                        console.log('event--->>>', event);
                    }
                    return event;
                }));
  }

  public loader:any
  async present() {
    this.loader = await this.loadingController.create({
      cssClass: 'my-custom-class',
      message: 'Please wait...',
      duration: 2000
    });
    await this.loader.present();
  }

    async dismiss() {
      let topLoader = await this.loadingController.getTop();
      while (topLoader) {
        if (!(await topLoader.dismiss())) {
          // throw new Error('Could not dismiss the topmost loader. Aborting...');
          break
        }
        topLoader = await this.loadingController.getTop();
      }
    }
}

Uncaught (in promise): overlay does not exist is a very generic error and can appear in multiple situations. In general, it occurs when trying to resolve a promise and it does not exist.

The solution is quite simple, we are trying to close a modal or the loading component when it has not been created yet.
You should use the ionic lifecycle (see documentation ) to be able to initialize the LoadingController before closing it:

• ngOnInit
• ionViewWillEnter
• ionViewDidEnter
• ionViewWillLeave
• ionViewDidLeave
• ngOnDestroy

ngOnInit() { // or you can use ionViewWillEnter()
    this.loaderService.present(); }

ionViewDidEnter() {
    this.loaderService.dismiss();
}

I hope it helps.

Calling the loader in a timeout function solves it for me. All calls to the loader function are made from a shared service.

presentLoading(duration?,text?) {
    this.platform.ready().then(()=>{
      setTimeout(()=>{
        this.startLoader(duration,text);
      },2000)
    })
  }
  async startLoader(duration?,text?){
    const loading = await this.loadingController.create({
      cssClass: 'my-custom-class',
      message: (text)?('Please wait...'+text):'Please wait...',
      duration: (duration)?duration:''
    });
    await loading.present();

    const { role, data } = await loading.onDidDismiss();
  }

and ensure you check if the loader is active before closing it

dismissLoader(){
    this.loadingController.getTop().then(v => v ? this.doStopLoader() : null);
  }
  doStopLoader(){
    this.loadingController.dismiss();
  }

这也可能是由于在浏览器中运行您的应用造成的，特别是在使用浏览器设备仿真时（在Chrome中称为“设备工具栏”，在Firefox中称为“响应模式”）。请尝试禁用设备工具栏（Ctrl+Shift+M）或在物理设备上运行您的应用，或者使用适当的仿真器。

async showLoading() {
    const loading = await this.loadingCtrl.create({
      message: 'Waiting',
    });
    loading.present();
    loading.addEventListener('ionLoadingDidPresent', (event: any) => {
      console.log('ionLoadingDidPresent')
     //here to do longtime task and close dialog and you will not meet close before open problem
    });
  }