Related
I'm trying to make a graph with ChartJS, but I can't get it...
I have followed a lot of tutorials but I get the same problem always.
This is my app.module:
import { ChartsModule } from 'ng2-charts/ng2-charts';
#NgModule({
declarations: [
...
...
...
],
imports: [
...
ChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
This is my angular.json:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/#popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/apexcharts/dist/apexcharts.min.js"
]
My component.ts:
import { Component, OnInit } from '#angular/core';
import { ChartDataset } from 'chart.js';
import { Color, Label } from 'ng2-charts';
#Component({
selector: 'app-stadistics',
templateUrl: './stadistics.component.html',
styleUrls: ['./stadistics.component.css']
})
export class LineChartComponent {
lineChartData: ChartDataset[] = [
{ data: [85, 72, 78, 75, 77, 75], label: 'Crude oil prices' },
];
lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];
lineChartOptions = {
responsive: true,
};
lineChartColors: Color[] = [
{
borderColor: 'black',
backgroundColor: 'rgba(255,255,0,0.28)',
},
];
lineChartLegend = true;
lineChartPlugins = [];
lineChartType = 'line';
}
export class StadisticsComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
And finally, my html component, where I get the following error:
I don't know what it happens, but I can't find the solution...
How can I solve this?
Thanks!
EDIT
I share my package.json:
{
"name": "foro-front",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~11.0.9",
"#angular/common": "~11.0.9",
"#angular/compiler": "~11.0.9",
"#angular/core": "~11.0.9",
"#angular/forms": "~11.0.9",
"#angular/platform-browser": "~11.0.9",
"#angular/platform-browser-dynamic": "~11.0.9",
"#angular/router": "~11.0.9",
"#popperjs/core": "^2.9.1",
"apexcharts": "^3.26.0",
"bootstrap": "^4.5.3",
"chart.js": "^3.1.0",
"jquery": "^3.6.0",
"mdb-ui-kit": "^3.3.0",
"moment": "^2.29.1",
"ng-apexcharts": "^1.5.9",
"ng2-charts": "^2.4.2",
"ngx-pagination": "^5.0.0",
"rxjs": "~6.6.0",
"save": "^2.4.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1100.7",
"#angular/cli": "~11.0.7",
"#angular/compiler-cli": "~11.0.9",
"#types/jasmine": "~3.6.0",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}
I think ng2-charts might not play well with chart.js version 3.0.0+, try to install an older version:
npm install chart.js#2.9.4 --save.
Also, I'm not sure if your html has the baseChart directive added (because the picture is cut with the error), it should look something like:
<canvas
baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
Finally, here is a minimal example of adding chart.js to your application - stackblitz
You cant just bind your data to a canvas and think it will work, you will either have to use the bare lib correctly because im pretty sure chart.js doesnt expose an export called ChartDatasetsee integration (https://www.chartjs.org/docs/latest/getting-started/integration.html) and usage (https://www.chartjs.org/docs/latest/getting-started/usage.html) guides to get started.
Alternatively you can use the angular wrapper which is just a component where you can just supply your data to (https://valor-software.com/ng2-charts/).
npm install ng2-charts
when we want to install this above command just write --force
npm install ng2-charts --force in angular 13 command prompt
go to package.json my version number is = "ng2-charts": "^2.4.3",
I'm currently making app in Angular 10 (not use Angular-cli).
This app is compiled and bundled using webpack 4 and #ngtools/webpack, then working fine on Chrome, but not working on IE11 with below error.
SCRIPT1002: Syntax error
vendor.js (2, 5884)
function makeDecorator(name, props, parentClass, additionalProcessing, typeFn) {
return noSideEffects(() => {
^^^^^
How can I get rid of this error?
webpack.config.js (excerpt)
module.exports = {
entry: {
'polyfills': './app/polyfills.ts',
'vendor': './app/vendor.ts',
'app': './app/main.ts'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
use: [
{
loader: '#ngtools/webpack'
}
]
}
]
}
plugins: [
new AngularCompilerPlugin({
tsConfigPath: 'tsconfig.json',
entryModule: 'app/app.module.ts#AppModule'
})
]
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2020",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"types": ["node", "core-js"],
"typeRoots": ["node_modules/#types"],
"sourceMap": true,
"plugins": [
{ "name": "#angular/language-service" }
],
"lib" : ["es2015", "es2015.iterable", "dom"],
},
"exclude": [
"node_modules",
],
"angularCompilerOptions": {
"enableIvy": true,
"skipMetadataEmit" : true,
}
}
polyfills.ts
import "core-js/es/array/index";
import "core-js/es/date/index";
import "core-js/es/function/index";
import "core-js/es/map/index";
import "core-js/es/math/index";
import "core-js/es/number/index";
import "core-js/es/object/index";
import "core-js/es/reflect/index";
import "core-js/es/regexp/index";
import "core-js/es/set/index";
import "core-js/es/string/index";
import "core-js/es/symbol/index";
import "core-js/features/reflect/index";
import "zone.js/dist/zone";
import "classlist.js";
import "web-animations-js";
if (!Element.prototype.matches) {
Element.prototype.matches = (<any>Element.prototype).msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
package.json (dependencies)
"dependencies": {
"#angular/animations": "10.2.0",
"#angular/common": "10.2.0",
"#angular/compiler": "10.2.0",
"#angular/compiler-cli": "10.2.0",
"#angular/core": "10.2.0",
"#angular/forms": "10.2.0",
"#angular/language-service": "10.2.0",
"#angular/platform-browser": "10.2.0",
"#angular/platform-browser-dynamic": "10.2.0",
"#angular/router": "10.2.0",
"#fortawesome/fontawesome-free": "5.15.1",
"angular-in-memory-web-api": "0.11.0",
"bootstrap": "4.5.3",
"classlist.js": "1.1.20150312",
"core-js": "3.7.0",
"jquery": "3.5.1",
"popper.js": "1.16.0",
"rxjs": "6.6.3",
"web-animations-js": "2.3.2",
"zone.js": "0.11.2",
},
"devDependencies": {
"#ngtools/webpack": "10.2.0",
"#types/core-js": "2.5.4",
"#types/jasmine": "3.5.14",
"#types/node": "14.14.2",
"#types/webpack": "4.41.23",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "5.2.1",
"browserify": "17.0.0",
"codelyzer": "6.0.1",
"copy-webpack-plugin": "6.2.1",
"copyfiles": "2.4.0",
"css-loader": "5.0.0",
"file-loader": "6.1.1",
"glob": "7.1.6",
"html-loader": "1.3.2",
"html-webpack-plugin": "4.5.0",
"istanbul-instrumenter-loader": "3.0.1",
"mini-css-extract-plugin": "0.12.0",
"nodemon": "2.0.6",
"raw-loader": "1.0.0",
"reflect-metadata": "0.1.13",
"regenerator-runtime": "0.13.7",
"remap-istanbul": "0.13.0",
"rimraf": "3.0.2",
"source-map-loader": "1.1.1",
"style-loader": "2.0.0",
"terser-webpack-plugin": "4.2.3",
"to-string-loader": "1.1.6",
"ts-helpers": "1.1.2",
"ts-node": "9.0.0",
"tslint": "6.1.0",
"typescript": "4.0.3",
"watchify": "3.11.1",
"webpack": "4.44.1",
"webpack-cli": "3.3.12",
"webpack-dev-middleware": "3.7.2",
"webpack-dev-server": "3.11.0",
"webpack-md5-hash": "0.0.6",
"webpack-merge": "5.2.0"
}
Check browserslist file. You should remove not before IE 9-11. Like this:
> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.
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...
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.
My package.json
"ng2-file-upload": "1.0.3",
"ng2-translate": "2.5.0",
"angular2-cookie": "1.2.3",
"angular2-google-maps": "0.15.0",
"key-codes": "0.0.1",
"rxjs": "5.0.0-beta.12"
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"systemjs": "0.19.27",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.23",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "3.3.6",
"es6-promise": "3.2.1",
"es6-shim": "0.35.1",
"ie-shim": "0.1.0",
"jquery": "2.2.4",
"moment": "^2.14.1",
"theuy-bootstrap-datetimepicker": "^1.0.0"
Solution
You can fix this issue by using a babel-loader in your webpack.config.js
npm install --save-dev babel-loader babel-preset-es2015
after that you can add
//webpack.config.js
module.exports = {
// configuration
loaders: [
{
test: /\.js$/,
exclude: /node_modules\/(?!(#angular\/common\/src\/facade\/.+))/,
loader: 'babel?presets[]=es2015'
}
]
};
The thing is that the angular team did not export the facade as a es5 code but es6.
You can fix this issue by using a babel-loader in your webpack.config.js
npm install --save-dev babel-loader babel-preset-es2015
after that you can add
//webpack.config.js
module.exports = {
// configuration
loaders: [
{
test: /\.js$/,
exclude: /node_modules\/(?!(#angular\/common\/src\/facade\/.+))/,
loader: 'babel?presets[]=es2015'
}
]
};
The thing is that the angular team did not export the facade as a es5 code but es6.