# Ionic2 Loading component error **URL:** \ **Category:** ionic-v3\ **Created:** [May 10, 2016, 6:32am UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585 "2016-05-10T06:32:04Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![sshhawwnn](https://avatars.discourse-cdn.com/v4/letter/s/ce73a5/32.png) [@sshhawwnn](https://forum.ionicframework.com/u/sshhawwnn)\ **Post date:** [May 10, 2016, 6:32am UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/1 "2016-05-10T06:32:04Z")
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** ``` Sign In

Use this email address to sign in

Username is required

Use this password to sign in

Password is required

``` **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) ``` ---
**Author:** ![iignatov](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/iignatov/32/100112_2.png) [@iignatov](https://forum.ionicframework.com/u/iignatov)\ **Post date:** [May 10, 2016, 7:25am UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/2 "2016-05-10T07:25:47Z")
There’s an open issue about this: > > > \#### 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), \: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), \: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), \: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](https://forum.ionicframework.com/t/loading-component-nativeelement-uncaught-promise/51490/2): > [@Loading Component - nativeElement - Uncaught promise](https://forum.ionicframework.com/t/loading-component-nativeelement-uncaught-promise/51490/2): > > If you want to be sure that `NavController` has finished presenting your loading component you can move your _code_ into the promise that `this.nav.present()` returns: In your case you should update your code this way: ```auto 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(); } }); ``` ---
**Author:** ![ozexpert](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ozexpert/32/64108_2.png) [@ozexpert](https://forum.ionicframework.com/u/ozexpert)\ **Post date:** [May 21, 2016, 5:54am UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/3 "2016-05-21T05:54:51Z")
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. ---
**Author:** ![sshhawwnn](https://avatars.discourse-cdn.com/v4/letter/s/ce73a5/32.png) [@sshhawwnn](https://forum.ionicframework.com/u/sshhawwnn)\ **Post date:** [June 28, 2016, 4:15pm UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/4 "2016-06-28T16:15:35Z")
Problem solved. Thanks @iignatov ---
**Author:** ![richardmarais](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardmarais/32/101456_2.png) [@richardmarais](https://forum.ionicframework.com/u/richardmarais)\ **Post date:** [January 30, 2017, 9:10am UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/5 "2017-01-30T09:10:54Z")
> [@iignatov](#): > > this.nav.present(this.loading).then(() =\> { 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? ---
**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\ **Post date:** [January 30, 2017, 10:08pm UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/6 "2017-01-30T22:08:33Z")
Things have changed since this thread started. Now you just tell the loader to present itself. See [the docs](https://ionicframework.com/docs/v2/api/components/loading/LoadingController/). ---
**Author:** ![neo\_split](https://avatars.discourse-cdn.com/v4/letter/n/ea5d25/32.png) [@neo\_split](https://forum.ionicframework.com/u/neo_split)\ **Post date:** [May 25, 2017, 10:07pm UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/7 "2017-05-25T22:07:11Z")
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! ---
**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\ **Post date:** [May 25, 2017, 10:48pm UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/8 "2017-05-25T22:48:15Z")
> [@neo\_split](#): > > it throws an error saying this.loading.dismiss( ) is not a function! Maybe you are calling dismiss before the message is presented. `loading.present()` is a Promise. Don’t call dismiss until the Promise returns. ---
**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\ **Post date:** [May 25, 2017, 11:10pm UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/9 "2017-05-25T23:10:48Z")
> [@AaronSterling](#): > > Maybe you are calling dismiss before the message is presented. loading.present() is a Promise. Don’t call dismiss until the Promise returns. I thought this wasn’t supposed to be a problem any more. See the discussion in [#11119](https://github.com/driftyco/ionic/issues/11119). ---
**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\ **Post date:** [May 26, 2017, 1:49am UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/10 "2017-05-26T01:49:08Z")
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. ---
**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\ **Post date:** [May 26, 2017, 2:44am UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/11 "2017-05-26T02:44:44Z")
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. ---
**Author:** ![neo\_split](https://avatars.discourse-cdn.com/v4/letter/n/ea5d25/32.png) [@neo\_split](https://forum.ionicframework.com/u/neo_split)\ **Post date:** [May 26, 2017, 8:42am UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/12 "2017-05-26T08:42:58Z")
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: ```auto // Display loading ctrl displayLoading() :Promise { return this._loading = this._loadingCtrl.create({ }).present() } // Dismiss loading ctrl dismissLoading() :Promise { 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) } ``` ![image](https://global.discourse-cdn.com/ionicframework/original/3X/a/8/a8a664e9ea0cddb375ceba4febc21c45f95e6a78.png) 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. ---
**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\ **Post date:** [May 26, 2017, 4:26pm UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/13 "2017-05-26T16:26:24Z")
```auto this.loading: Loading = this.loadCtrl.create({}); this.loading.present(); this.loading.dismiss(); ``` Not: `this.loading = this.loadCtrl.create({}).present(); // this is a Promise type` You’re assigning a `Promise` to this.loading, not a `Loading` type. Reason #500 to strongly type your variables. ---
**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\ **Post date:** [May 26, 2017, 6:42pm UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/14 "2017-05-26T18:42:28Z")
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. ---
**Author:** ![neo\_split](https://avatars.discourse-cdn.com/v4/letter/n/ea5d25/32.png) [@neo\_split](https://forum.ionicframework.com/u/neo_split)\ **Post date:** [May 26, 2017, 7:18pm UTC](https://forum.ionicframework.com/t/ionic2-loading-component-error/51585/15 "2017-05-26T19:18:07Z")
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;`