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

8条答案

按热度按时间

s1ag04yj1#

您的代码看起来很好，问题可能出在您的组件类中。出现上述问题可能是由于未充分使用Ionic LoadingController，一个常见的用例是在执行loader.dismiss（）之前执行loader.present（），在这种情况下，控制台中会出现相同的错误。您需要检查您的应用程序中是否出现这种情况。希望这会有所帮助。

赞(0）回复(0）举报 2022-12-08

oipij1gg2#

确保您没有错误地导入PopoverController而不是ModalController。

qmelpv7a3#

我也遇到了这个问题，其他的解决方案都不适用于我。有效的方法是确保要被删除的模态存在，然后调用dislose。

{
       const popover = await this.popoverCtrl.getTop();
        if (popover)
            await popover.dismiss(null);    
}

3zwjbxry4#

Recently, I was also getting the same error "Error: Uncaught (in promise): overlay does not exist".
Scenario: showing loader in ionic modal. Loader needs to be shown before getting data and dismiss it after receiving data.
When I debugged it, I have found out this.loadingCtrl.dismiss() was getting called before loader.present() .
Sometimes, you might be having small data to load/process and by that time this.loadingCtrl.dismiss() can be get called.
The simplest solution worked for me is to add setTimeout() for dismissing the loader.

setTimeout({
  this.loadingCtrl.dismiss()
}, 100)

li9yvcax5#

在我的例子中，我通过从结束加载的方法中删除return来解决这个问题，这样它就不会从开始就返回它
之前

async finishLoading() {
    this.loading = false;
    return await this.loadingController.dismiss();
}

之后

async finishLoading() {
    this.loading = false;
    await this.loadingController.dismiss();
}

0qx6xfy66#

检查一次两个地方 * 离子组件和离子页面 * 是否导入了ModalController，在我的情况下，我错误地导入了popOver而不是ModalController。

wkyowqbh7#

我有同样的错误，这是因为我正在调用popoverController.dismiss()，而没有popover是活动的。

kgsdhlau8#

在我的例子中，抛出了错误，因为我在创建它之前就取消了modal。

Ionic 错误：未捕获(在承诺中)：覆盖不存在(离子可选)

8条答案

相关问题

热门标签

最新问答