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

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.

Related

Cannot find module 'schema' or its corresponding type declaration

I'm trying to create an Angular 8 project, but I always end up having an error when I try to compile the resulting app due to a wrong path in my node_modules folder; specifically in the file located at #angular/cli/commands/add-impl.d.ts, which contains this:
import { Arguments } from '../models/interface';
import { SchematicCommand } from '../models/schematic-command';
import { Schema as AddCommandSchema } from './add';
export declare class AddCommand extends SchematicCommand<AddCommandSchema> {
readonly allowPrivateSchematics = true;
readonly allowAdditionalArgs = true;
readonly packageManager: import("../../../../dist-schema/packages/angular/cli/lib/config/schema").PackageManager;
run(options: AddCommandSchema & Arguments): Promise<number | void>;
reportAnalytics(paths: string[], options: AddCommandSchema & Arguments, dimensions?: (boolean | number | string)[], metrics?: (boolean | number | string)[]): Promise<void>;
private isPackageInstalled;
private executeSchematic;
private findProjectVersion;
private hasMismatchedPeer;
}
The line reading readonly packageManager: import("../../../../dist-schema/packages/angular/cli/lib/config/schema").PackageManager; always gives an error since the specified path can't find the file its pointing to; I checked and I actually don't see any folder called dist-schema/packages, and I don't know what its purpose is; if I change the route to: #/angular/cli/lib/config/schema the error goes away and everything works fine, but if generate the node_modules folder again, the error comes back since the route is again specified as before.
I haven't been able to find much information regarding this, and nothing at all that points me to a solution; I've tried upgrading my Angular version to the latest 8.x.x version, deleting my package-lock.json file, deleting node_modules and installing again and none seem to work.
This is my package.json file:
{
"name": "opti-frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"watch": "gulp watch",
"dev": "gulp development",
"prod": "gulp production",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.13",
"#angular/cdk": "^8.2.3",
"#angular/common": "~8.0.1",
"#angular/compiler": "~8.0.1",
"#angular/core": "~8.0.1",
"#angular/forms": "~8.0.1",
"#angular/google-maps": "^9.0.0-rc.0",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "~8.0.1",
"#angular/platform-browser-dynamic": "~8.0.1",
"#angular/router": "~8.0.1",
"#ckeditor/ckeditor5-angular": "^1.1.2",
"#gvreddy04/ckeditor5-build-classic-all-features": "^16.11.0",
"#mdi/font": "^3.9.97",
"#ngu/carousel": "^1.5.5",
"#swimlane/ngx-charts": "^13.0.2",
"#swimlane/ngx-datatable": "^15.0.2",
"#types/googlemaps": "^3.39.2",
"#types/html2canvas": "0.0.35",
"#types/jspdf": "^1.3.2",
"angular-fusioncharts": "^3.0.3",
"bootstrap": "^4.3.1",
"file-saver": "^2.0.2",
"fusioncharts": "^3.14.1",
"google-libphonenumber": "^3.2.6",
"gulp": "^4.0.2",
"gulp-replace": "^1.0.0",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.1",
"html2pdf.js": "^0.9.1",
"intl-tel-input": "^14.1.0",
"jquery": "^3.5.1",
"jspdf": "^1.5.3",
"material-design-icons": "^3.0.1",
"ng-recaptcha": "^5.0.0",
"ng2-pdf-viewer": "^6.1.2",
"ng2-table": "^1.3.2",
"ngx-bootstrap": "^5.2.0",
"ngx-chips": "^2.1.0",
"ngx-color-picker": "^8.2.0",
"ngx-gauge": "^1.0.0-beta.11",
"ngx-highlightjs": "^4.0.0",
"ngx-hotjar": "^8.0.2",
"ngx-image-cropper": "^3.2.1",
"ngx-intl-tel-input": "^2.3.1",
"ngx-mat-select-search": "^2.0.0",
"popper.js": "^1.16.0",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.8",
"#angular/cli": "^8.3.18",
"#angular/compiler-cli": "~8.0.1",
"#angular/language-service": "~8.0.1",
"#types/jasmine": "^3.4.6",
"#types/jasminewd2": "^2.0.8",
"#types/node": "~8.9.4",
"codelyzer": "^5.2.0",
"dotenv": "^8.2.0",
"gulp-file": "^0.4.0",
"gulp-rename": "^1.4.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "^3.4.5"
}
}

Vendor Bundle Size Not Reducing

I'm trying to get my build much smaller to get my load time faster, but when I run
ng build --prod --aot --vendor-chunk --common-chunk --build-optimizer and then run a lighthouse report from google dev tools
I get
what's odd is that it seems to have worked if I go into the dist folder to look at file sizes, which seem smaller that the lighthouse report.
So far to reduce the size by doing the following:
Removed old/unused package.json entries
changed all material imports to specific path like for paginator I'm importing now as
import { MatPaginator } from "#angular/material/paginator";
instead of import { MatPaginator } from "#angular/material/"; per the advice from other posts.
replaced moment with moment.min.js so that locales don't get added
added brotli for text compression.
Also I want to mention because I don't know if it's relevant, but I don't have a webpack.config.js file only a custom-webpack.config.js for brotli. The only thing I edited in angular.json to get webpack working was this for brotli
"architect": {
"build": {
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.config.js"
},
I've never used webpack before so this could be an issue, but I'm not sure.
package.json
{
"name": "mean-course",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --mode development --open",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:server": "nodemon backend/server.js"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.13",
"#angular/cdk": "~8.2.2",
"#angular/common": "~8.2.4",
"#angular/compiler": "~8.2.4",
"#angular/core": "~8.2.4",
"#angular/forms": "~8.2.4",
"#angular/material": "^8.2.2",
"#angular/platform-browser": "~8.2.4",
"#angular/platform-browser-dynamic": "~8.2.4",
"#angular/router": "~8.2.4",
"#ng-bootstrap/ng-bootstrap": "^5.1.5",
"#ngrx/store": "^8.6.0",
"ably": "^1.1.22",
"angular-doka": "file:src/angular-doka",
"angular-filepond": "^1.0.5",
"azure-arm-rediscache": "^3.0.0",
"bootstrap": "^4.4.1",
"classlist.js": "^1.1.20150312",
"countdown": "^2.6.0",
"dotenv": "^8.2.0",
"filepond": "^4.13.4",
"filepond-plugin-file-encode": "^2.1.5",
"filepond-plugin-file-validate-size": "^2.2.0",
"filepond-plugin-file-validate-type": "^1.2.5",
"filepond-plugin-image-crop": "^2.0.3",
"filepond-plugin-image-edit": "^1.6.0",
"filepond-plugin-image-exif-orientation": "^1.0.7",
"filepond-plugin-image-preview": "^4.6.1",
"filepond-plugin-image-resize": "^2.0.4",
"filepond-plugin-image-transform": "^3.7.2",
"jquery": "^3.5.1",
"jsonwebtoken": "^8.5.1",
"lib-storage-service": "^1.0.2",
"material": "^0.4.1",
"moment-mini": "^2.24.0",
"ng-starrating": "^1.0.20",
"ngx-bar-rating": "^1.1.0",
"ngx-clipboard": "^12.3.0",
"ngx-device-detector": "^1.3.20",
"ngx-filepond": "^5.0.1",
"ngx-light-carousel": "^1.0.37-beta.8",
"ngx-pagination": "^5.0.0",
"ngx-simple-countdown": "^1.0.2",
"ngx-spinner": "^8.0.3",
"ngx-toastr": "^11.2.1",
"ngx-ui-carousel": "^1.3.2",
"numeral": "^2.0.6",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"tsoa": "^2.5.7",
"uid": "0.0.2",
"web-animations-js": "^2.3.2",
"yamljs": "^0.3.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-builders/custom-webpack": "8.4.1",
"#angular-devkit/build-angular": "^0.803.26",
"#angular/cli": "~8.3.2",
"#angular/compiler-cli": "~8.2.4",
"#angular/language-service": "~8.2.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^8.10.59",
"brotli-gzip-webpack-plugin": "^0.5.0",
"brotli-webpack-plugin": "^1.1.0",
"codelyzer": "^5.0.0",
"compression-webpack-plugin": "^4.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
},
"browser": {
"crypto": false
}
}
Here is a stats.json file when using ng build --prod
Here's a more detailed version as well
Remove libraries like ngx-spinner, filepond etc. which are huge as they are not treeshakable. Also if you have not configured your server to serve gzip files, do that. It will give you huge reduction in size. Also pre gzip your js files after build my using a utility like gzip-all.
https://www.npmjs.com/package/gzip-all
Also change your server max cache policy to get caching benefits.

The Angular AoT build failed

After Run the this command :- ionic cordova build android --aot
[12:00:25] ionic-app-script task: "build" [12:00:25] Error: The
Angular AoT build failed. See the issues above Error: The Angular AoT
build failed. See the issues above
at C:\Users\Admin\Git\olm_android\node_modules#ionic\app-scripts\dist\aot\aot-compiler.js:237:55
at step (C:\Users\Admin\Git\olm_android\node_modules#ionic\app-scripts\dist\aot\aot-compiler.js:32:23)
at Object.next (C:\Users\Admin\Git\olm_android\node_modules#ionic\app-scripts\dist\aot\aot-compiler.js:13:53)
at fulfilled (C:\Users\Admin\Git\olm_android\node_modules#ionic\app-scripts\dist\aot\aot-compiler.js:4:58)
[ERROR] An error occurred while running subprocess ionic-app-scripts.
Error Image
Error Comes After Build
ionic cordova build android --release --aot
Failed To build Apk and after normal run it will take time to load on mobile...taking to much time to load open an component
My dependencies
"dependencies": {
"#angular/animations": "^5.1.1",
"#angular/cdk": "^5.0.1",
"#angular/common": "5.2.10",
"#angular/compiler": "5.2.10",
"#angular/compiler-cli": "5.2.10",
"#angular/core": "5.2.10",
"#angular/fire": "^5.2.1",
"#angular/forms": "5.2.10",
"#angular/http": "5.2.10",
"#angular/material": "^5.0.1",
"#angular/platform-browser": "5.2.10",
"#angular/platform-browser-dynamic": "5.2.10",
"#ionic-native/core": "4.7.0",
"#ionic-native/fcm": "^4.12.2",
"#ionic-native/file": "^4.11.0",
"#ionic-native/file-opener": "^4.11.0",
"#ionic-native/file-transfer": "^4.11.0",
"#ionic-native/firebase": "^4.7.0",
"#ionic-native/firebase-messaging": "^4.11.0",
"#ionic-native/header-color": "^4.7.0",
"#ionic-native/in-app-browser": "^4.11.0",
"#ionic-native/social-sharing": "^4.20.0",
"#ionic-native/splash-screen": "4.7.0",
"#ionic-native/status-bar": "^4.7.0",
"#ionic/angular": "^4.4.2",
"#ionic/core": "^4.4.2",
"#ionic/lab": "^1.0.13",
"#ionic/pro": "1.0.20",
"#ionic/storage": "2.1.3",
"angularfire2": "^5.0.0-rc.6",
"cordova-android": "7.1.4",
"cordova-android-support-gradle-release": "^1.4.7",
"cordova-browser": "^6.0.0",
"cordova-plugin-console": "^1.1.0",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-file-opener2": "^2.2.1",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-headercolor": "^1.0.0",
"cordova-plugin-inappbrowser": "^3.1.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^1.2.1",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-plugin-x-socialsharing": "^5.6.3",
"cordova-support-android-plugin": "^1.0.1",
"cordova-support-google-services": "^1.2.1",
"es6-promise-plugin": "^4.2.2",
"firebase": "^4.12.1",
"ionic-angular": "3.9.2",
"ionic-selectable": "^3.0.3",
"ionicons": "3.0.0",
"jwt-decode": "^2.2.0",
"natives": "^1.1.6",
"ngx-qrcode2": "0.0.9",
"rxjs": "5.5.10",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"#ionic/app-scripts": "3.2.4",
"#ionic/cli-plugin-cordova": "1.6.2",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-statusbar": {},
"cordova-plugin-headercolor": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-file": {},
"cordova-plugin-file-opener2": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-android-support-gradle-release": {
"ANDROID_SUPPORT_VERSION": "27.+"
},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-console": {},
"cordova-plugin-x-socialsharing": {
"ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
}
},
"platforms": [
"browser",
"ios",
"android"
]
}
}
AdminverifyUnverify request page is declared in module so it is throwing error. Please define a component in a single place either in app.module.ts or adminverifyUnverify.module.ts.
remove it from app.module.ts if not opening it as a modal controller.
AOT compiler means [ production build ] not allowed any duplicate component to be declared in multiple places.

Repeated loading of same page Makes the Angular App Slow

I have an Angular app based on Angular7 and there has been a very strange issue I am getting in the code.
When I load the same page multiple times then the app starts responding extremely slow and I am even unable to type in the form after repeated loading of same page.
This is not specific to only one page rather all the pages makes the app slow after repeated use of multiple pages.
Now, the concern is how to detect which code is creating this issue?
I tried to update the Angular packages but nothing helps.
Here is the package.json
{
"name": "apex",
"version": "6.0.0",
"license": "",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.5",
"#angular/animations": "7.0.1",
"#angular/common": "7.0.1",
"#angular/compiler": "7.0.1",
"#angular/core": "7.0.1",
"#angular/forms": "7.0.1",
"#angular/http": "7.0.1",
"#angular/platform-browser": "7.0.1",
"#angular/platform-browser-dynamic": "7.0.1",
"#angular/platform-server": "7.0.1",
"#angular/router": "7.0.1",
"#ng-bootstrap/ng-bootstrap": "4.1.3",
"#ng-select/ng-select": "^2.16.2",
"#ngx-translate/core": "10.0.2",
"#swimlane/ngx-datatable": "^14.0.0",
"#types/jquery": "3.3.21",
"bootstrap": "4.0.0",
"bourbon": "5.0.0",
"classlist.js": "1.1.20150312",
"core-js": "2.5.3",
"file-droppa": "^1.8.0",
"intl": "1.2.5",
"jquery": "3.3.1",
"ng2-validation": "^4.2.0",
"ngx-bootstrap": "^4.0.1",
"ngx-chips": "^2.0.0-beta.0",
"ngx-toastr": "^9.1.2",
"ngx-ui-switch": "7.0.1",
"node-sass": "4.7.2",
"primeicons": "^1.0.0",
"primeng": "^7.1.2",
"resize-observer-polyfill": "1.4.2",
"rxjs": "6.3.3",
"screenfull": "3.3.1",
"web-animations-js": "2.2.5",
"zone.js": "0.8.26"
},
"devDependencies": {
"#angular/cli": "7.0.3",
"#angular/compiler-cli": "7.0.1",
"#angular/language-service": "7.0.1",
"#types/jasmine": "2.8.6",
"#types/node": "9.4.7",
"codelyzer": "4.2.1",
"jasmine-core": "3.1.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "1.4.2",
"karma-jasmine": "1.1.1",
"karma-jasmine-html-reporter": "1.0.0",
"protractor": "5.3.0",
"rxjs-compat": "6.2.0",
"ts-node": "5.0.1",
"tslint": "5.7.0",
"typescript": "3.1.3",
"#angular-devkit/build-angular": "~0.6.8"
}
}
The question is too generic, you need to debug your code and see if you have any synchronic requests that might get stuck.

Angular 4.3.1 on Safari iOS 10.3.4: TypeError null is not an object (evaluating 'n[o].outlets')

I am working on a Angular 4.3.1 app. The app is working mostly fine except for the Safari Browser on iOS 10.3.2.
I have the bug-tracking software "Sentry" installed and I tried my best to get my head around the two issues provided there. I am asking for hints or advice on how to investigate further.
I try to provide as much detail as possible.
Error names:
TypeError/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js in Ct
error null is not an object (evaluating 'n[o].outlets')
Error/app/polyfills.473d66a7973dfd05d135.bundle.js in g
error Uncaught (in promise): TypeError: null is not an object (evaluating 'n[o].outlets') Ct#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:185868 https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:185302 d#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:175024 Ot#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:185267 ft#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:183155 updateTargetUrlAndHref#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:232259 https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:231328 __tryOrUnsub#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:389719 next#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:389005 _next#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:388051 next#https://www.example.com/app/vendor.6a2c8d7c7cab...
Device details:
browser: Mobile Safari 10.0
browser.name: Mobile Safari
device: iPhone
device.family: iPhone
level: error
logger: javascript
os: iOS 10.3.2
os.name: iOS
Events (from first to latest):
navigation to #/ from /app/#/app/account 15:04:25
xhr GET https://www.example.com/api/config [200] 15:04:25
navigation to [Filtered] from #/ 15:04:30
ui.click input#email.form-control.ng-untouched.ng-pristine.ng-invalid[type="email"] 15:04:31
ui.input input#email.form-control.ng-untouched.ng-pristine.ng-invalid[type="email"] 15:04:36
ui.click [Filtered] 15:04:37
ui.input [Filtered] 15:04:38
ui.click div.text-center > button.btn.btn-fill.btn-primary[type="submit"] 15:04:39
xhr POST [Filtered] [200] 15:04:39
sentry QuotaExceededError: The quota has been exceeded. 15:04:39
xhr GET https://www.example.com/api/users/1 [200] 15:04:39
navigation to #/app/home from [Filtered] 15:04:39
sentry TypeError: null is not an object (evaluating 'n[o].outlets') 15:04:44
ui.click div.navbar-header > button.navbar-toggle[type="button"] > span.icon-bar 15:04:45
ui.click div.nav-container > ul.nav > li > a > p 15:04:45
navigation to #/app/account from #/app/home 15:04:45
exception Error: Uncaught (in promise): TypeError: null is not an object (evaluating 'n[o].outlets')
Ct#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:185868
https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:185302
d#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:175024
Ot#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:185267
ft#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:183155
updateTargetUrlAndHref#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:232259
https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:231328
__tryOrUnsub#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:389719
next#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:389005
_next#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:388051
next#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:387723
next#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:726591
https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:221087
onInvoke#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:12362
run#https://www.example.com/app/polyfills.473d66a7973dfd05d135.bundle.js:1:51145
https://www.example.com/app/polyfills.473d66a7973dfd05d135.bundle.js:1:48117
onInvokeTask#https://www.example.com/app/vendor.6a2c8d7c7cabb4001dd2.bundle.js:1:12278
runTask#https://www.example.com/app/polyfills.473d66a7973dfd05d135.bundle.js:1:51834
u#https://www.example.com/app/polyfills.473d66a7973dfd05d135.bundle.js:1:46666
invoke#https://www.example.com/app/polyfills.473d66a7973dfd05d135.bundle.js:1:57925
Package.json
{
"name": "md-angular-cli-pro",
"version": "1.4.4",
"license": "http://md-pro-angular.creative-tim.com/documentation/tutorial",
"repository": {
"type": "git",
"url": "https://github.com/creativetimofficial/material-dashboard-pro-angular.git"
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "1.0.0-beta.0",
"#angular/animations": "4.3.1",
"#angular/cdk": "2.0.0-beta.10",
"#angular/common": "4.3.1",
"#angular/compiler": "4.3.1",
"#angular/core": "4.3.1",
"#angular/forms": "4.3.1",
"#angular/http": "4.3.1",
"#angular/material": "2.0.0-beta.10",
"#angular/platform-browser": "4.3.1",
"#angular/platform-browser-dynamic": "4.3.1",
"#angular/platform-server": "4.3.1",
"#angular/router": "4.3.1",
"#ngrx/effects": "^4.1.1",
"#ngrx/router-store": "^4.1.1",
"#ngrx/store": "^4.1.1",
"#ngrx/store-devtools": "^4.1.1",
"angular2-material-datepicker": "0.5.0",
"animate.css": "3.5.2",
"arrive": "2.3.1",
"bootstrap": "3.3.5",
"bootstrap-material-design": "0.5.10",
"bootstrap-notify": "3.1.3",
"bootstrap-select": "1.12.2",
"bootstrap-tagsinput": "0.7.1",
"chartist": "0.9.4",
"chartist-plugin-zoom": "0.4.0",
"core-js": "2.4.1",
"datatables": "1.10.12",
"datatables.net-bs": "1.10.12",
"datatables.net-responsive": "2.1.1",
"eonasdan-bootstrap-datetimepicker": "4.17.47",
"font-awesome": "^4.7.0",
"fullcalendar": "3.4.0",
"googleapis": "19.0.0",
"hammerjs": "^2.0.8",
"jasny-bootstrap": "3.1.3",
"jquery": "1.12.4",
"jquery-validation": "1.17.0",
"jvectormap": "2.0.4",
"lodash": "^4.17.4",
"moment": "2.18.1",
"moment-timezone": "0.4.0",
"ng2-nouislider": "1.6.1",
"ng2-select": "1.2.0",
"ngx-chips": "1.4.6",
"nouislider": "9.2.0",
"perfect-scrollbar": "0.8.1",
"pusher-js": "^4.2.2",
"raven-js": "^3.21.0",
"rxjs": "5.4.2",
"sweetalert2": "6.10.1",
"twitter-bootstrap-wizard": "1.2.0",
"uglify-js": "1.3.5",
"validate": "3.0.1",
"web-animations-js": "2.2.2",
"zone.js": "0.8.4"
},
"devDependencies": {
"#angular/cli": "1.4.2",
"#angular/compiler-cli": "4.3.1",
"#types/bootstrap": "3.3.32",
"#types/chartist": "0.9.34",
"#types/jasmine": "2.5.38",
"#types/jquery": "1.10.31",
"#types/node": "6.0.73",
"codelyzer": "2.0.0",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "3.2.0",
"karma": "1.4.1",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "0.2.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.1.0",
"ts-node": "2.0.0",
"tslint": "4.5.0",
"typescript": "2.4.2"
}
}
My thoughts so far:
After having removed a couple of more bugs specific to this iOS version (like a broken date-pipe) I came to the conclusion that it might be a compatibility issue related to the browser version. In specific I believe the issue is related to how angular handles routing (I derive that from the issue name 'n[o].outlets' as in router-outlets and the fact that this happens after a navigation action as you can see in the events list), but that is really all I could figure out so far.
BTW The QuotaExceededError is related to a check if localStorage is available (which it is not in this case).
Thank you
Even a little hint to how to resolve this issue or at least a shed of some light on the case is highly appreciated. Thank you very much.
null is not an object (evaluating '$scope.userprofile.wallet_provider.toLowerCase')
I use to face to same issue, but I resole it by if/else check,
so just find the code and put check into it.
ex:
if($scope.userprofile.is_prepaid && **<Put check here>**
$scope.userprofile.wallet_provider.toLowerCase() == "del-miles"){
if(!$scope.group_menu[4]['submenu'][1] || $scope.group_menu[4]['submenu'][1].link !== miles_menu_element.link)
$scope.group_menu[4]['submenu'].splice(1,0,miles_menu_element);
}
So I will one one check of "$scope.userprofile.wallet_provider"

Categories

Resources