Ionic2 Loading component error

sshhawwnn · May 10, 2016, 6:32am

Hi all,

I am trying to use the Loading component but I have problem trying to manually dismiss the Loading dialog.

LoginPage is a Modal

import {IonicApp, Page, NavController, ViewController, Loading} from 'ionic-angular';
import {User} from '../../providers/user';
import {DashboardPage} from '../dashboard/dashboard';

@Page({
	templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
	static get parameters() {
		return [[NavController], [User], [ViewController]];
	}

	constructor(nav, user, viewCtrl) {
		this.nav = nav;
		this.user = user;
		this.viewCtrl = viewCtrl;

		// Loading component
		this.loading = Loading.create({
			content: "Authenticating. . ."
		});

		this.login = {};
		this.submitted = false;
	}

	onLogin(form) {
		this.submitted = true;

		if (form.valid) {
			this.nav.present(this.loading);
			if (this.user.login(this.login.username, this.login.password)) {
				//this.loading.dismiss();
				this.viewCtrl.dismiss();
				this.nav.setRoot(DashboardPage);
			}
			else {
				this.loading.dismiss(); // << this is giving problems.
			}
		}
	}

	dismiss(data) {
		// using the injected ViewController this page
		// can "dismiss" itself and pass back data
		this.viewCtrl.dismiss(data);
	}
}

LoginPage html

<ion-navbar *navbar>
	<ion-buttons start>
		<button (click)="dismiss()"><ion-icon ios="ios-close"></ion-icon></button>
	</ion-buttons>
	<ion-title>Sign In</ion-title>
	<ion-buttons end>
		<button (click)="onLogin(loginForm)">Login</button>
	</ion-buttons>
</ion-navbar>

<ion-content>

	<ion-list>
		<form #loginForm="ngForm" novalidate>
			<p class="text first">Use this email address to sign in</p>
			<ion-item>
				<input class="text-input" [(ngModel)]="login.username" placeholder="email address" ngControl="username" type="text" #username="ngForm" required autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
			</ion-item>
			<p [hidden]="username.valid || submitted == false" danger padding-left>
				Username is required
			</p>

			<p class="text second">Use this password to sign in</p>
			<ion-item>
				<input class="text-input" [(ngModel)]="login.password" placeholder="password" ngControl="password" type="password" #password="ngForm" required autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
			</ion-item>
			<p [hidden]="password.valid || submitted == false" danger padding-left>
				Password is required
			</p>

		</form>
	</ion-list>

</ion-content>

Error

[Error] EXCEPTION: Error during evaluation of "click"
	logError (app.bundle.js:31475)
	logGroup (app.bundle.js:31485)
	call (app.bundle.js:29225)
	(anonymous function) (app.bundle.js:13947)
	(anonymous function) (app.bundle.js:28724)
	__tryOrUnsub (app.bundle.js:73914)
	next (app.bundle.js:73863)
	_next (app.bundle.js:73822)
	next (app.bundle.js:73799)
	_finalNext (app.bundle.js:73674)
	_next (app.bundle.js:73666)
	next (app.bundle.js:73623)
	emit (app.bundle.js:28713)
	onError (app.bundle.js:28400)
	onHandleError (app.bundle.js:28584)
	handleError (angular2-polyfills.js:394)
	runGuarded (angular2-polyfills.js:300)
	runInner (app.bundle.js:28594:82)
	run (app.bundle.js:28501)
	outsideHandler (app.bundle.js:32717)
	invokeTask (angular2-polyfills.js:423)
	runTask (angular2-polyfills.js:320)
	invoke (angular2-polyfills.js:490)
	dispatchEvent
	touchEnd (app.bundle.js:55874)
	(anonymous function)
[Error] ORIGINAL EXCEPTION: TypeError: undefined is not an object (evaluating 'leavingView.pageRef().nativeElement')
	logError (app.bundle.js:31475)
	call (app.bundle.js:29234)
	(anonymous function) (app.bundle.js:13947)
	(anonymous function) (app.bundle.js:28724)
	__tryOrUnsub (app.bundle.js:73914)
	next (app.bundle.js:73863)
	_next (app.bundle.js:73822)
	next (app.bundle.js:73799)
	_finalNext (app.bundle.js:73674)
	_next (app.bundle.js:73666)
	next (app.bundle.js:73623)
	emit (app.bundle.js:28713)
	onError (app.bundle.js:28400)
	onHandleError (app.bundle.js:28584)
	handleError (angular2-polyfills.js:394)
	runGuarded (angular2-polyfills.js:300)
	runInner (app.bundle.js:28594:82)
	run (app.bundle.js:28501)
	outsideHandler (app.bundle.js:32717)
	invokeTask (angular2-polyfills.js:423)
	runTask (angular2-polyfills.js:320)
	invoke (angular2-polyfills.js:490)
	dispatchEvent
	touchEnd (app.bundle.js:55874)
	(anonymous function)
[Error] ORIGINAL STACKTRACE:
	logError (app.bundle.js:31475)
	call (app.bundle.js:29237)
	(anonymous function) (app.bundle.js:13947)
	(anonymous function) (app.bundle.js:28724)
	__tryOrUnsub (app.bundle.js:73914)
	next (app.bundle.js:73863)
	_next (app.bundle.js:73822)
	next (app.bundle.js:73799)
	_finalNext (app.bundle.js:73674)
	_next (app.bundle.js:73666)
	next (app.bundle.js:73623)
	emit (app.bundle.js:28713)
	onError (app.bundle.js:28400)
	onHandleError (app.bundle.js:28584)
	handleError (angular2-polyfills.js:394)
	runGuarded (angular2-polyfills.js:300)
	runInner (app.bundle.js:28594:82)
	run (app.bundle.js:28501)
	outsideHandler (app.bundle.js:32717)
	invokeTask (angular2-polyfills.js:423)
	runTask (angular2-polyfills.js:320)
	invoke (angular2-polyfills.js:490)
	dispatchEvent
	touchEnd (app.bundle.js:55874)
	(anonymous function)
[Error] LoadingPopOut@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:42745:40
createTransition@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:62742:35
file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:45238:74
invoke@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/angular2-polyfills.js:390:34
run@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/angular2-polyfills.js:283:50
runOuter@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:28596:74
runOutsideAngular@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:28514:88
_beforeTrans@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:45228:37
_postRender@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:45210:26
_render@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:45126:29
_transition@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:45098:21
remove@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:44959:29
dismiss@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:46551:32
onLogin@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:472:26
handleEventInternal
handleEvent@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:14300:48
triggerEventHandlers@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:24129:47

file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:32639:48
file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:32717:93
invoke@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/angular2-polyfills.js:390:34
onInvoke@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:28563:47
invoke@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/angular2-polyfills.js:389:43
runGuarded@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/angular2-polyfills.js:297:54
runInner@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:28594:81
run@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:28501:74
outsideHandler@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:32717:64
invokeTask@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/angular2-polyfills.js:423:43
runTask@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/angular2-polyfills.js:320:58
invoke@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/angular2-polyfills.js:490:41
dispatchEvent@[native code]
touchEnd@file:///Users/shawnang/Library/Developer/CoreSimulator/Devices/05D02343-6E70-4EB1-94F1-88011A0C2E7A/data/Containers/Bundle/Application/1EBD5207-9521-43C6-AE2D-D43D18CBED90/SAM.app/www/build/js/app.bundle.js:55874:44
[native code]
	logError (app.bundle.js:31475)
	call (app.bundle.js:29238)
	(anonymous function) (app.bundle.js:13947)
	(anonymous function) (app.bundle.js:28724)
	__tryOrUnsub (app.bundle.js:73914)
	next (app.bundle.js:73863)
	_next (app.bundle.js:73822)
	next (app.bundle.js:73799)
	_finalNext (app.bundle.js:73674)
	_next (app.bundle.js:73666)
	next (app.bundle.js:73623)
	emit (app.bundle.js:28713)
	onError (app.bundle.js:28400)
	onHandleError (app.bundle.js:28584)
	handleError (angular2-polyfills.js:394)
	runGuarded (angular2-polyfills.js:300)
	runInner (app.bundle.js:28594:82)
	run (app.bundle.js:28501)
	outsideHandler (app.bundle.js:32717)
	invokeTask (angular2-polyfills.js:423)
	runTask (angular2-polyfills.js:320)
	invoke (angular2-polyfills.js:490)
	dispatchEvent
	touchEnd (app.bundle.js:55874)
	(anonymous function)

iignatov · May 10, 2016, 7:25am

There’s an open issue about this:

github.com/ionic-team/ionic-framework

Ionic v2 - Loading Service - Throwing error "cannot read property 'nativeElement' ..."

opened 06:07PM - 17 Apr 16 UTC

closed 09:02PM - 29 Dec 16 UTC

tonyawad88

#### Short description of the problem: I have a welcome page that invokes the L…oading service in its constructor. As soon as the page loads for the first time the error / exception is thrown. #### What behavior are you expecting? No exceptions thrown. **Steps to reproduce:** 1. Create a new ionic project `ionic start MyIonic2Project tutorial --v2 --ts` 2. On the root page, add in its constructor the following: ``` import {Page,Loading,NavController} from 'ionic-angular'; @Page({ templateUrl: 'build/pages/hello-ionic/hello-ionic.html' }) export class HelloIonicPage { constructor(private nav: NavController) { this.nav =nav; let loading = Loading.create({ content: "Please wait...", duration: 3000, dismissOnPageChange: true }); this.nav.present(loading); } } ``` 3 . Check the console for the exception **Other information:** (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc) ``` browser_adapter.ts:73 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:73ExceptionHandler.call @ exception_handler.ts:52(anonymous function) @ application_ref.ts:258schedulerFn @ async.ts:127SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:73EventEmitter.emit @ async.ts:113NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.ts:134NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.ts:88ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244NgZoneImpl.runInner @ ng_zone_impl.ts:97NgZone.run @ ng_zone.ts:204NavController._afterTrans @ nav-controller.js:1003(anonymous function) @ nav-controller.js:979Animation._didFinish @ animation.js:590Animation.play @ animation.js:264(anonymous function) @ nav-controller.js:990ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227NgZoneImpl.runOuter @ ng_zone_impl.ts:98NgZone.runOutsideAngular @ ng_zone.ts:218NavController._beforeTrans @ nav-controller.js:948NavController._postRender @ nav-controller.js:930(anonymous function) @ nav-controller.js:865(anonymous function) @ nav-controller.js:1217promiseReactionJob @ es6-shim.js:2171(anonymous function) @ es6-shim.js:2159Item.run @ browser.js:64drainQueue @ browser.js:34ZoneDelegate.invokeTask @ angular2-polyfills.js:365NgZoneImpl.inner.inner.fork.onInvokeTask @ ng_zone_impl.ts:54ZoneDelegate.invokeTask @ angular2-polyfills.js:364Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431 browser_adapter.ts:73 TypeError: Cannot read property 'nativeElement' of undefined at new LoadingMdPopOut (http://localhost:8101/build/js/app.bundle.js:44356:40) at Function.Transition.createTransition (http://localhost:8101/build/js/app.bundle.js:63476:16) at http://localhost:8101/build/js/app.bundle.js:46769:58 at ZoneDelegate.invoke (http://localhost:8101/build/js/angular2-polyfills.js:332:29) at Zone.run (http://localhost:8101/build/js/angular2-polyfills.js:227:44) at NgZoneImpl.runOuter (http://localhost:8101/build/js/app.bundle.js:26898:71) at NgZone.runOutsideAngular (http://localhost:8101/build/js/app.bundle.js:26817:80) at Portal.NavController._beforeTrans (http://localhost:8101/build/js/app.bundle.js:46759:20) at Portal.NavController._postRender (http://localhost:8101/build/js/app.bundle.js:46741:14) at Portal.NavController._render (http://localhost:8101/build/js/app.bundle.js:46657:18) ------------- Elapsed: 77 ms; At: Sun Apr 17 2016 13:54:49 GMT-0400 (EDT) ------------- at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:8101/build/js/angular2-polyfills.js:1354:23) at ZoneDelegate.scheduleTask (http://localhost:8101/build/js/angular2-polyfills.js:342:50) at Zone.scheduleMacroTask (http://localhost:8101/build/js/angular2-polyfills.js:283:40) at http://localhost:8101/build/js/angular2-polyfills.js:133:26 at setTimeout (eval at createNamedFn (http://localhost:8101/build/js/angular2-polyfills.js:973:18), <anonymous>:3:37) at process.nextTick (http://localhost:8101/build/js/app.bundle.js:64854:9) at enqueuePromiseReactionJob (http://localhost:8101/build/js/app.bundle.js:37073:7) at fulfillPromise (http://localhost:8101/build/js/app.bundle.js:37099:9) ------------- Elapsed: 52 ms; At: Sun Apr 17 2016 13:54:49 GMT-0400 (EDT) ------------- at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:8101/build/js/angular2-polyfills.js:1354:23) at ZoneDelegate.scheduleTask (http://localhost:8101/build/js/angular2-polyfills.js:342:50) at Zone.scheduleEventTask (http://localhost:8101/build/js/angular2-polyfills.js:286:40) at zoneAwareAddEventListener (http://localhost:8101/build/js/angular2-polyfills.js:880:11) at XMLHttpRequest.addEventListener (eval at createNamedFn (http://localhost:8101/build/js/angular2-polyfills.js:973:18), <anonymous>:3:43) at XMLHttpRequest.desc.set [as onload] (http://localhost:8101/build/js/angular2-polyfills.js:776:19) at XHRImpl.get (http://localhost:8101/build/js/app.bundle.js:30356:20) at TemplateNormalizer.normalizeTemplate (http://localhost:8101/build/js/app.bundle.js:10294:30) ------------- Elapsed: 327 ms; At: Sun Apr 17 2016 13:54:49 GMT-0400 (EDT) ------------- at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:8101/build/js/angular2-polyfills.js:1354:23) at ZoneDelegate.scheduleTask (http://localhost:8101/build/js/angular2-polyfills.js:342:50) at Zone.scheduleMacroTask (http://localhost:8101/build/js/angular2-polyfills.js:283:40) at http://localhost:8101/build/js/angular2-polyfills.js:133:26 at setTimeout (eval at createNamedFn (http://localhost:8101/build/js/angular2-polyfills.js:973:18), <anonymous>:3:37) at process.nextTick (http://localhost:8101/build/js/app.bundle.js:64854:9) at enqueuePromiseReactionJob (http://localhost:8101/build/js/app.bundle.js:37073:7) at Promise.then (http://localhost:8101/build/js/app.bundle.js:37438:11) ``` **Which Ionic Version?** 2.x #### Plunker that shows an example of your issue http://plnkr.co/edit/fA0KB70ggJd0nptNvYpl?p=preview **Run `ionic info` from terminal/cmd prompt:** (paste output below) ``` WARN: ionic.config.js has been deprecated, you can remove it. Your system information: Cordova CLI: 6.0.0 Gulp version: CLI version 3.9.0 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.4 Ionic CLI Version: 2.0.0-beta.25 Ionic App Lib Version: 2.0.0-beta.15 ios-deploy version: 1.8.2 ios-sim version: 5.0.3 OS: Mac OS X El Capitan Node Version: v0.12.7 Xcode version: Xcode 7.3 Build version 7D175 ```

As a workaround try the suggestion in the linked post:

In your case you should update your code this way:

           this.nav.present(this.loading).then(() => {
                if (this.user.login(this.login.username, this.login.password)) {
                    //this.loading.dismiss();
                    this.viewCtrl.dismiss();
                    this.nav.setRoot(DashboardPage);
                }
                else {
                    this.loading.dismiss();
                }
            });

ozexpert · May 21, 2016, 5:54am

Thanks @iignatov that solution is great. It’s just that the document is unclear on that. it just says to use this.loading.dismiss(). I know that Beta can be an excuse reason.

sshhawwnn · June 28, 2016, 4:15pm

Problem solved. Thanks @iignatov

richardmarais · January 30, 2017, 9:10am

I try this, but get the following:

import { NavController } from 'ionic-angular';

this.nav.present(this.loading).then(() =...

error:

[ts] Property 'present' does not exist on type 'NavController'.
any

Any ideas?

rapropos · January 30, 2017, 10:08pm

Things have changed since this thread started. Now you just tell the loader to present itself. See the docs.

neo_split · May 25, 2017, 10:07pm

Is there any way to manually dismiss Loading (without using timeout)? When I just call the dismiss() method it throws an error saying this.loading.dismiss( ) is not a function!

AaronSterling · May 25, 2017, 10:48pm

Maybe you are calling dismiss before the message is presented. loading.present() is a Promise. Don’t call dismiss until the Promise returns.

rapropos · May 25, 2017, 11:10pm

I thought this wasn’t supposed to be a problem any more. See the discussion in #11119.

AaronSterling · May 26, 2017, 1:49am

I wasn’t aware that bug was fixed. But I still don’t know what happens if you dismiss a Loading you never called. Just returns and does nothing? What if the present() arrives later? I don’t know the answer to that either. At any rate, I wait for the Promise to ack in my own code, before I dismiss. Maybe overkill.

rapropos · May 26, 2017, 2:44am

My understanding is that the bug fix made it so there was not a possibility of dismissing things before the presentation was completed, because navigation actions were queued.

neo_split · May 26, 2017, 8:42am

I do make sure that Loading is displayed and in its “then” I do my stuff. See the code below where I still get error:

  // Display loading ctrl
  displayLoading() :Promise<any> {
    return this._loading = this._loadingCtrl.create({
      }).present()
  }

  // Dismiss loading ctrl
  dismissLoading() :Promise<any> {
    return this._loading.dismiss();
  }

  registerUser() {
    this.displayLoading()
      .then( () => {
        this._authSrv.createNewUser(this._registerUserForm.value.email, this._registerUserForm.value.password)
          .then( (data) => {
            console.log('User created :' + data);
            this._loading.dismiss()
              .then(() => {
                this._userhSrv.uid = data.uid;
                this._nav.setRoot('UserProfilePage');
              })
              // dimissLoading error
              .catch(console.log)
          })
          // create new user error
          .catch ((error) => {
            this.showAlertToUser(error);
          })
      })
      // displayLoading error
      .catch(console.log)
  }

What is peculiar about this error is that it is shown as an Alert - if you see my code, I am only displaying Alert to user when the new User registration fails. The errors regarding loading controller are supposed to be logged onto console.

AaronSterling · May 26, 2017, 4:26pm

this.loading: Loading = this.loadCtrl.create({});
this.loading.present();
this.loading.dismiss();

Not:
this.loading = this.loadCtrl.create({}).present(); // this is a Promise<any> type

You’re assigning a Promise<any> to this.loading, not a Loading type. Reason #500 to strongly type your variables.

rapropos · May 26, 2017, 6:42pm

In addition to what @AaronSterling said, I think it is never a good idea to store loading components (or alerts, etc) in object properties, for two reasons: it makes it unclear who is responsible for the object, and it encourages double-dismiss and reuse bugs. Always make them only lexically scoped variables.

neo_split · May 26, 2017, 7:18pm

Thanks Aaron, I now understood why I got the error.

Interestingly though, I did strong type my loading variable and Typescript did not complain when I assigned a Promise to a variable of type Loading

private _loading: Loading;