Develop Reference

NPM error, could not resolve dependency and conflicting peer dependency

I have trouble deploying my project on netlify because of NPM errors.
These are my dependencies.
"dependencies": {
"#angular/animations": "~15.1.1",
"#angular/cdk": "^15.1.2",
"#angular/common": "~15.1.1",
"#angular/compiler": "~15.1.1",
"#angular/core": "~15.1.1",
"#angular/forms": "~15.1.1",
"#angular/localize": "~15.1.1",
"#angular/platform-browser": "~15.1.1",
"#angular/platform-browser-dynamic": "~15.1.1",
"#angular/router": "~15.1.1",
"#angular/service-worker": "~15.1.1",
"#googlemaps/markerclustererplus": "^1.2.3",
"#ngx-translate/core": "^13.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#uiowa/digit-only": "^2.3.0",
"angular-svg-icon": "^12.0.0",
"broadcast-channel": "^4.2.0",
"date-fns": "^2.25.0",
"hammerjs": "^2.0.8",
"ngx-device-detector": "^3.0.0",
"ngx-image-cropper": "^5.0.1",
"ngx-progressbar": "^6.1.1",
"primeflex": "^3.0.1",
"primeicons": "^4.1.0",
"primeng": "^12.2.0-rc.1",
"rxjs": "~6.6.0",
"tslib": "^2.1.0",
"zone.js": "^0.11.8"
},
"devDependencies": {
"#angular-builders/jest": "^12.1.0",
"#angular-devkit/build-angular": "~15.1.2",
"#angular-eslint/builder": "15.2.0",
"#angular-eslint/eslint-plugin": "15.2.0",
"#angular-eslint/eslint-plugin-template": "15.2.0",
"#angular-eslint/schematics": "15.2.0",
"#angular-eslint/template-parser": "15.2.0",
"#angular/cli": "~15.1.2",
"#angular/compiler-cli": "~15.1.1",
"#biesbjerg/ngx-translate-extract": "^7.0.4",
"#types/googlemaps": "^3.43.3",
"#types/jasmine": "~3.6.0",
"#types/jest": "^26.0.23",
"#types/lodash": "^4.14.172",
"#types/node": "^12.11.1",
"default-passive-events": "^2.0.0",
"eslint": "^8.28.0",
"eslint-plugin-sort-class-members": "^1.11.0",
"eslint-plugin-unused-imports": "^1.1.4",
"husky": "^6.0.0",
"jasmine-core": "~3.7.0",
"jest": "^27.0.5",
"karma-coverage": "~2.0.3",
"lint-staged": "^11.0.0",
"lodash": "^4.17.21",
"npm-run-all": "^4.1.5",
"prettier": "^2.3.1",
"ts-jest": "^29.0.5",
"typescript": "^4.9.4"
}
And when doing a simple "npm install" I get this error:
errors
I have tried looking around and following many guides but nothing seems to work, for eaxample I have already tried: These steps and many other tricks I've found when googling around

reinstall node.js: works with at least version v16.18.0
https://nodejs.org/download/release/v16.18.0/
and then use npm i --force

Angular source-map-explorer debug a dependency

Problem
In my main.js bundle there is a single massive node_module dependency that does not make sense. ngx-translate-core • 2.85MB in node_modules
Expected behaviour
The ngx-translate-core.mjs package should only be 17.5Kb according to bundlephobia: #ngx-translate/core#14.0.0.
Attempted solutions
I have tried upgrading Angular from version 12 to 13 and now to 14. When it was Angular 12 it appeared as unsupportedIterableToArray • 2.85 MB
Changing the tsconfig.module to CommonJS also caused the chunk to map to a different npm package
ngrx-store-localstorage • 2.9 MB
Is there a way to see the dependency tree that webpack uses internally in order to see what causes this to be bundled?
package.json:
"dependencies": {
"#angular/animations": "^14.2.0",
"#angular/cdk": "^14.2.0",
"#angular/common": "^14.2.0",
"#angular/compiler": "^14.2.0",
"#angular/core": "^14.2.0",
"#angular/forms": "^14.2.0",
"#angular/localize": "^14.2.0",
"#angular/material": "14.2.0",
"#angular/material-moment-adapter": "14.2.0",
"#angular/platform-browser": "^14.2.0",
"#angular/platform-browser-dynamic": "^14.2.0",
"#angular/router": "^14.2.0",
"#ng-bootstrap/ng-bootstrap": "^13.0.0",
"#ng-idle/core": "^11.1.0",
"#ng-idle/keepalive": "^11.0.3",
"#ngrx/effects": "^14.2.0",
"#ngrx/router-store": "^14.2.0",
"#ngrx/store": "^14.2.0",
"#ngrx/store-devtools": "^14.2.0",
"#ngx-translate/core": "14.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#types/lodash": "^4.14.168",
"aws-amplify": "^4.3.5",
"aws-sdk": "^2.1143.0",
"core-js": "^2.6.12",
"date-fns": "^2.28.0",
"date-fns-tz": "^1.3.4",
"eslint-plugin-unused-imports": "^2.0.0",
"html2canvas": "^1.0.0-rc.7",
"jspdf": "^2.3.1",
"jszip": "^3.5.0",
"jszip-utils": "^0.1.0",
"lodash": "^4.17.21",
"moment": "^2.29.2",
"ngrx-store-localstorage": "14.0.0",
"ngx-logger": "^4.0.6",
"ngx-photo-editor": "^0.3.6",
"pdf417-generator": "^1.0.3",
"rxjs": "7.5.6",
"stream-browserify": "^3.0.0",
"utf8": "^3.0.0",
"util": "^0.12.4",
"zone.js": "~0.11.4"
},
"devDependencies": {
"tslib": "^2.0.0",
"#angular-devkit/build-angular": "^14.2.1",
"#angular-eslint/builder": "14.0.3",
"#angular-eslint/eslint-plugin": "14.0.3",
"#angular-eslint/eslint-plugin-template": "14.0.3",
"#angular-eslint/schematics": "14.0.3",
"#angular-eslint/template-parser": "14.0.3",
"#angular/cli": "14.2.0",
"#angular/compiler-cli": "^14.2.0",
"#angular/language-service": "^14.2.0",
"#types/file-saver": "^2.0.3",
"#types/graphql": "^14.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/jest": "^26.0.20",
"#types/jszip": "^3.4.1",
"#types/node": "^12.19.14",
"#typescript-eslint/eslint-plugin": "^5.36.2",
"#typescript-eslint/parser": "^5.36.2",
"canvas": "^2.7.0",
"commander": "^6.2.1",
"crypto-browserify": "^3.12.0",
"csvtojson": "^2.0.10",
"cypress-file-upload": "^5.0.8",
"dependency-cruiser": "^10.0.1",
"eslint": "^8.23.0",
"fast-csv": "^4.3.6",
"graphql": "^15.3.0",
"jasmine-spec-reporter": "~5.0.0",
"jest": "^27.3.1",
"jest-junit": "^13.0.0",
"jest-preset-angular": "^10.1.0",
"ng-packagr": "^14.2.0",
"ngx-translate-testing": "6.1.0",
"protractor": "~7.0.0",
"stream-browserify": "^3.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.6.4"
},

Update angular 5 to 6+ ngx-bootstrap error

I'm trying to update my application from angular 5 to angular 6+.
After updating a lot of packages I have this error and I'm stuck on that.
ERROR in chunk app [entry]
app.bundle.js
/home/sonyde/Documents/project/extranet/node_modules/ngx-bootstrap/esm5/ngx-bootstrap.js dc21e88b40837b73971f9f5c6a9b4b40
Unexpected token (467:27)
| function BsLocaleService() {
| this._defaultLocale = 'en';
| this._locale = new !(function webpackMissingModule() { var e = new Error("Cannot find module 'rxjs'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())(this._defaultLocale);
| this._localeChange = this._locale.asObservable();
| }
ERROR in vendor.bundle.js from UglifyJs
Unexpected token: operator (!) [./node_modules/#angular/core/fesm5/core.js:4463,36][vendor.bundle.js:5560,36]
I updated angular (5.2 to 6.1), webpack (3.12.0 to 4.19.0) and rxjs (5.5.2 to 6.0.0) versions.
I don't think the error comes from uglifyjs because we already tried to remove it and the error is still there, in the console.
Does anyone have any insight on this?
My packages :
"dependencies": {
"#angular/animations": "^6.1.10",
"#angular/cdk": "^6.4.7",
"#angular/cli": "6",
"#angular/common": "^6.1.10",
"#angular/compiler": "^6.1.10",
"#angular/compiler-cli": "^6.1.10",
"#angular/core": "^6.1.10",
"#angular/forms": "^6.1.10",
"#angular/http": "^6.1.10",
"#angular/platform-browser": "^6.1.10",
"#angular/platform-browser-dynamic": "^6.1.10",
"#angular/platform-server": "^6.1.10",
"#angular/router": "^6.1.10",
"#epegzz/sass-vars-loader": "^3.3.1",
"#ngtools/webpack": "6.2.1",
"#ngx-translate/core": "^10.0.2",
"#ngx-translate/http-loader": "^3.0.1",
"#swimlane/ngx-charts": "^9.1.1",
"#types/core-js": "0.9.36",
"#types/jasmine": "2.5.38",
"#types/lodash": "ts2.0",
"#types/node": "6.0.45",
"#types/pdfjs-dist": "2.1.3",
"#types/swiper": "^3.4.3",
"#types/webpack-env": "1.12.1",
"angular2-router-loader": "0.3.4",
"angular2-template-loader": "0.6.0",
"awesome-typescript-loader": "^5.2.1",
"bootstrap-sass": "3.3.7",
"classlist.js": "^1.1.20150312",
"clean-webpack-plugin": "0.1.16",
"codelyzer": "^3.0.1",
"common-models": "2.3.2",
"conventional-changelog-cli": "^1.3.4",
"cookieconsent": "3.0.4",
"copy-webpack-plugin": "^5.0.0",
"core-js": "2.4.1",
"css-loader": "^1.0.1",
"d3": "^4.13.0",
"d3-ng2-service": "^2.2.0",
"deep-extend": "0.4.1",
"dynamic-i18n": "^1.0.5",
"extract-loader": "^5.1.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "^6.2.0",
"flat": "^4.0.0",
"font-awesome": "4.7.0",
"html-webpack-exclude-assets-plugin": "^0.0.7",
"html-webpack-plugin": "3.0.0",
"htmllint": "^0.6.0",
"htmllint-cli": "^0.0.6",
"imagemin-webpack-plugin": "1.4.4",
"intl": "1.2.5",
"loader-utils": "^1.1.0",
"lodash": "4.17.2",
"mini-css-extract-plugin": "^1.3.3",
"mixgen": "1.1.7",
"moment": "^2.20.1",
"moment-range": "^3.0.3",
"ng2-pdf-viewer": "6.1.0",
"ng2-select-compat": "1.3.1",
"ngx-bootstrap": "4.3.0",
"ngx-cookieconsent": "^2.2.3",
"ngx-infinite-scroll": "^10.0.1",
"ngx-order-pipe": "^1.0.2",
"node-sass": "^4.13.1",
"node-sass-json-importer": "^3.0.2",
"parallel-webpack": "3.0.0-alpha.2",
"pdfjs-dist": "2.2.228",
"pretty-checkbox": "^3.0.3",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.8",
"release-it": "^10.0.0",
"rxjs": "6.2.2",
"sass-loader": "7.2.0",
"shelljs": "^0.7.8",
"simple-progress-webpack-plugin-with-prefix": "^1.1.1",
"sourcemapped-stacktrace": "^1.1.11",
"string-replace-loader": "2.3.0",
"style-loader": "0.23.1",
"sweetalert2": "6.6.3",
"swiper": "^3.4.2",
"to-string-loader": "^1.1.5",
"ts-loader": "^8.0.12",
"tslib": "1.10.0",
"tslint": "5.20.1",
"tslint-loader": "^3.6.0",
"typescript": "2.9.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "0.5.7",
"web-animations-js": "2.2.2",
"webpack": "4.19.0",
"webpack-bundle-analyzer": "2.8.2",
"webpack-dev-server": "3.8.0",
"webpack-merge": "^4.1.0",
"zone.js": "0.8.29"
},
"devDependencies": {
"#angular/language-service": "^6.1.10",
"webpack-cli": "^3.3.12"
}

Correct way to use Ionic's social-sharing plugin?

I am trying to implement Ionic's social sharing plugin into my app, but I'm having issues.
This is the error I get:
Here is my component.ts
import {SocialSharing} from '#ionic-native/social-sharing/ngx';
export class SettingsPage implements OnInit {
code: string = null;
constructor(
private socialSharing: SocialSharing
) {}
ngOnInit() {}
shareCode(code) {
this.socialSharing.canShareViaEmail().then(() => {
// this.socialSharing
// .share(`Here is your code: ${code}`)
// .then(() => {
// log.debug('code has been shared?');
// });
});
}
}
Here is my package.json
{
"dependencies": {
"#angular/common": "^8.2.14",
"#angular/core": "^8.2.14",
"#angular/forms": "^8.2.14",
"#angular/http": "^7.2.16",
"#angular/platform-browser": "^8.2.14",
"#angular/platform-browser-dynamic": "^8.2.14",
"#angular/pwa": "^0.803.25",
"#angular/router": "^8.2.14",
"#angular/service-worker": "^8.2.14",
"#biesbjerg/ngx-translate-extract-marker": "^1.0.0",
"#fullcalendar/core": "^4.4.0",
"#fullcalendar/daygrid": "^4.4.0",
"#fullcalendar/interaction": "^4.4.0",
"#fullcalendar/resource-common": "^4.4.0",
"#fullcalendar/timegrid": "^4.4.0",
"#ionic-native/core": "^5.22.0",
"#ionic-native/in-app-browser": "^5.22.0",
"#ionic-native/social-sharing": "^5.22.0",
"#ionic-native/splash-screen": "^5.22.0",
"#ionic-native/status-bar": "^5.22.0",
"#ionic/angular": "^4.11.10",
"#ionic/pro": "2.0.4",
"#ionic/storage": "^2.2.0",
"#ngx-translate/core": "^12.1.2",
"#sentry/browser": "^4.6.6",
"angular2-counto": "^1.2.5",
"angularfire2": "^5.4.2",
"cordova": "^9.0.0",
"cordova-android": "^8.1.0",
"cordova-plugin-browsertab": "0.2.0",
"cordova-plugin-compat": "1.2.0",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-inappbrowser": "3.1.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^3.1.2",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-plugin-x-socialsharing": "^5.4.0",
"cordova-universal-links-plugin": "^1.2.1",
"cordova-universal-links-plugin-fix": "1.2.1",
"core-js": "^2.6.10",
"es6-promise-plugin": "^4.2.2",
"firebase": "^5.11.1",
"ionic": "^5.4.16",
"jam-icons": "^2.0.0",
"lodash": "^4.17.15",
"messageformat": "^2.3.0",
"moment": "^2.24.0",
"ngx-toastr": "^9.1.2",
"ngx-translate-messageformat-compiler": "^4.6.0",
"ngx-ui-loader": "^7.2.2",
"rxjs": "^6.5.4",
"uuid": "^3.4.0",
"web": "0.0.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/architect": "^0.803.25",
"#angular-devkit/build-angular": "^0.803.25",
"#angular-devkit/core": "^8.3.25",
"#angular-devkit/schematics": "^8.3.25",
"#angular/cli": "^8.3.25",
"#angular/compiler": "^8.2.14",
"#angular/compiler-cli": "^8.2.14",
"#angular/language-service": "^8.2.14",
"#biesbjerg/ngx-translate-extract": "^4.2.0",
"#ionic/angular-toolkit": "^2.2.0",
"#ionic/app-scripts": "^3.2.4",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "^2.0.8",
"#types/moment": "^2.13.0",
"#types/node": "^10.17.17",
"codelyzer": "~4.5.0",
"cypress": "^3.8.3",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.4",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.3",
"ts-node": "^8.6.2",
"tslint": "~5.12.0",
"typescript": "3.5.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-universal-links-plugin": {},
"cordova-plugin-browsertab": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-x-socialsharing": {
"ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
}
},
"platforms": [
"android"
]
}
}
I've been trying different for several hours but I just don't know what I'm missing. Is there a special module to include or something?

Add Social Sharing to app.module.ts under providers.
import { SocialSharing } from '#ionic-native/social-sharing/ngx';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [],
providers: [
...
SocialSharing,
...
],
bootstrap: [AppComponent]
})
export class AppModule {}

VERY IMPORTANT! Update for an issue in Android resolved by me ie: #dipesious
You will get an array of different packages as a .catch(error)
This means you did not add QUERY_ALL_PACKAGES permission to your manifest. Add this to your Android manifest file:
congratulations BUG RESOLVED...

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

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.

Make sure you did not wrongly import the PopoverController instead of ModalController.

I had this issue as well and none of the other solutions worked for me. What did work is ensuring that the modal to be dismissed exists, then calling dismiss.
{
const popover = await this.popoverCtrl.getTop();
if (popover)
await popover.dismiss(null);
}

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)

In my case I solved it by removing the return from my method that ends the loading, so that it does not return it from the beginning
Before
async finishLoading() {
this.loading = false;
return await this.loadingController.dismiss();
}
After
async finishLoading() {
this.loading = false;
await this.loadingController.dismiss();
}

check once the both places ionic component and ionic page you imported ModalController or not in my case I wrongly imported the popOver instead of ModalController.

I had the same error and it was because I was calling popoverController.dismiss() while no popover was active.

In my case error was thrown, because I was dismissing modal before it was created.