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

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

Continue reading...