[FIXED] Error: Uncaught (in promise): overlay does not exist (ionic-selectable)

Issue

I’m using ionic-selectable package github for products selection. I’m having error in console before opening the IonicSelectable in component.

ERROR Error: Uncaught (in promise): overlay does not exist
    at resolvePromise (zone.js:831)
    at zone.js:741
    at rejected (tslib.es6.js:71)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17299)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)

I’m not getting what’s the problem that is raising that issue. I have used the package as described in instructions like in app.module.ts

import { IonicSelectableModule } from 'ionic-selectable';
@NgModule({
  imports: [
    IonicSelectableModule
  ]
})
export class AppModule { }

and in lazy loaded module like this

import { IonicSelectableModule } from 'ionic-selectable';
import { HomePage } from './home';
@NgModule({
  declarations: [
    HomePage
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    IonicSelectableModule
  ]
})
export class HomePageModule { }

Here’s my template

<ionic-selectable 
  #productListingComponent
  [isMultiple]="true"
  itemValueField="id"
  itemTextField="title"
  class="product_class"
  [items]="products"
  [canClear]="false"
  [isEnabled]="isEnable"
  [canSearch]="true"
  [canAddItem]="true"
  (onChange)="productChange($event)"
  (onOpen)="onOpen($event)"
  [addButtonText]="'Buttons.Add' | translate"
  [clearButtonText]="'Buttons.Clear' | translate"
  [closeButtonText]="'Buttons.Close' | translate"
  [confirmButtonText]="'Buttons.Confirm' | translate"
  [searchPlaceholder]="'Buttons.Search' | translate"
  (onAddItem)="addProduct($event.component)"
  #selectable>

<ng-template ionicSelectableHeaderTemplate>
      <ion-toolbar>
            <ion-buttons end>
                  <ion-button color="tertiary" fill="clear" (click)="productListingComponent.close()">
                  Cancel
                  </ion-button>
            </ion-buttons>
      </ion-toolbar>
      <ion-toolbar class="text-toolbar">
            <p> Some description</p>
      </ion-toolbar>
</ng-template>
<ng-template ionicSelectableCloseButtonTemplate>
      <p>Cancel</p>
</ng-template>
<ng-template ionicSelectableSearchFailTemplate>
      <div class="ion-padding">
            <p *ngIf="selectable.searchText; else noSearch">
                  No product available!
            </p>
            <ng-template #noSearch>
                  No product, go to your dashboard to add a new product!
            </ng-template>
      </div>
</ng-template>

</ionic-selectable>

In my package.json

{
  "name": "Ionic project",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "translations": "ngx-translate-extract --input ./src --output ./src/assets/i18n/en.json ./src/assets/i18n/nl.json ./src/assets/i18n/fr.json ./src/assets/i18n/de.json --clean --sort --format json -m translatable"
  },
  "husky": {
    "hooks": {
      "pre-commit": "ng lint"
    }
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0",
    "@angular/common": "^7.2.15",
    "@angular/core": "^7.2.15",
    "@angular/forms": "^7.2.15",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "^7.2.15",
    "@angular/platform-browser-dynamic": "^7.2.15",
    "@angular/router": "^7.2.15",
    "@ionic-native/android-permissions": "^5.16.0",
    "@ionic-native/camera": "^5.16.0",
    "@ionic-native/chooser": "^5.16.0",
    "@ionic-native/core": "^5.16.0",
    "@ionic-native/device": "^5.16.0",
    "@ionic-native/file": "^5.16.0",
    "@ionic-native/file-transfer": "^5.16.0",
    "@ionic-native/geolocation": "^5.16.0",
    "@ionic-native/google-maps": "^5.5.0",
    "@ionic-native/ionic-webview": "^5.16.0",
    "@ionic-native/media-capture": "^5.16.0",
    "@ionic-native/splash-screen": "^5.16.0",
    "@ionic-native/status-bar": "^5.16.0",
    "@ionic/angular": "^4.11.4",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/pusher-js": "^4.2.2",
    "@types/socket.io-client": "^1.4.32",
    "angular2-signaturepad": "^2.9.0",
    "cordova-android": "^8.1.0",
    "cordova-browser": "^6.0.0",
    "cordova-ios": "^5.0.1",
    "cordova-plugin-add-swift-support": "^2.0.2",
    "cordova-plugin-android-permissions": "1.0.0",
    "cordova-plugin-camera": "4.1.0",
    "cordova-plugin-chooser": "1.2.5",
    "cordova-plugin-device": "2.0.3",
    "cordova-plugin-file": "6.0.2",
    "cordova-plugin-file-transfer": "1.7.1",
    "cordova-plugin-geolocation": "4.0.2",
    "cordova-plugin-ionic-keyboard": "2.2.0",
    "cordova-plugin-ionic-webview": "4.1.1",
    "cordova-plugin-media-capture": "3.0.3",
    "cordova-plugin-splashscreen": "5.0.3",
    "cordova-plugin-statusbar": "2.4.3",
    "cordova-plugin-whitelist": "1.3.4",
    "cordova-sqlite-storage": "3.3.0",
    "core-js": "^2.6.10",
    "google-libphonenumber": "^3.2.6",
    "hammerjs": "^2.0.8",
    "ionic-selectable": "^4.4.1",
    "moment": "^2.24.0",
    "ngx-google-places-autocomplete": "^2.0.4",
    "ngx-moment": "^3.5.0",
    "pusher-js": "^4.4.0",
    "rxjs": "~6.3.3",
    "socket.io-client": "^2.3.0",
    "uuid": "^3.3.3",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "^0.13.9",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "^7.3.9",
    "@angular/compiler": "^7.2.15",
    "@angular/compiler-cli": "^7.2.15",
    "@angular/language-service": "^7.2.15",
    "@biesbjerg/ngx-translate-extract": "^2.3.4",
    "@ionic/angular-toolkit": "~1.4.0",
    "@types/googlemaps": "^3.38.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^10.14.22",
    "codelyzer": "~4.5.0",
    "husky": "^1.3.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.6",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslib": "^1.10.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-chooser": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-geolocation": {},
      "cordova-plugin-device": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-file": {},
      "cordova-plugin-media-capture": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-sqlite-storage": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "browser",
      "ios",
      "android"
    ]
  }
}

If some could let me know how to resolve this issue will be highly appreciated

Solution

Your code looks fine, issue could be in your component class. The mentioned issue might appear due to inadequate usage of Ionic LoadingController, one common use case is when loader.dismiss() is executed before loader.present(), in this case same error occurs in console. You need to check whether this case is occuring in you application.
Hope this will help.

Answered By – Waleed Shahzaib

Answer Checked By – Dawn Plyler (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published