Ionic v2 nightly-build: Loading => Promise exception

[peterpeterparker]

Ionic2 version: 2.0.0-rc.3-201612100458

Following code taken from my app:

navigateToDetail() {
    let loading = this.loadingController.create({
        dismissOnPageChange: true
    });

    loading.present().then(() => {
        this.navController.push(DetailsPage, {
            stuff: this.stuff
        });
    });
}

will produce following errors the very first time the page is pushed:

error_handler.js:53 Error: Uncaught (in promise): false
at s (polyfills.js:3)
at s (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (ng_zone.js:227)
at t.invokeTask (polyfills.js:3)
at e.runTask (polyfills.js:3)
at i (polyfills.js:3)
at HTMLElement.invoke (polyfills.js:3)

Tried the same above code in other places in my app, also tried to used var self=this didn't change it, nothing helped. Same code with official RC.3 doesn't produce any errors.

P.S.: Everything is compiling fine. Angular is up-to-date 2.2.1. Node_modules was deleted and installed again.

P.P.S.: Just tried to remove the "dismissOnPageChange: true" part. Of course the loading stay pending but except that everything went fine, new page is pushed, no error in the stacktrace

[ataraxus]

@peterpeterparker it would be helpfull if you provide an ionic info output. I'm pretty sure I do use also navcontroller in a loader. But I'll double check it later.

[peterpeterparker]

here you go:

Your system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.3-201612100458
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.46
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v7.0.0
Xcode version: Xcode 8.0 Build version 8A218a

[peterpeterparker]

@ataraxus were you able to reproduce this ugly problem with the nightly-build?

[ataraxus]

no issues on my side:

  open(page) {
    let gotoPage;
    switch (page) {
      case 'quiz':
        gotoPage = QuizStartPage;
        break;
      case 'cards':
        gotoPage = CardsStartPage;
        break;
      case 'glossary':
        gotoPage = GlossaryPage;
        break;
      case 'highscore':
        gotoPage = HighScorePage;
        break;
      default: return;
    }
    let loader = this.loadingCtrl.create({
      content: 'Bitte warten...',
      dismissOnPageChange : true
    });
    loader.present().then(() => {
      this.navCtrl.push(gotoPage);
    });
  }

Your system information:

 ordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.3-201612062256
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.46
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.9.1
Xcode version: Not installed

[peterpeterparker]

Crazy. Same code here. Then I thought maybe the problem comes from my node version, I tried then with node 7.0.0, 7.2.1 and 6.9.1...nope, always face the error.

But I just notice, @ataraxus, won't you mind trying with the very last nightly-build? I just noticed mine is more recent...also could you display me your package.json, maybe I forgot something?

Really appreciate your help on that

[peterpeterparker]

I could reproduce the problem with the starter app using the nightly build by just adding a super simple load controller + push page. I just put the code on GitHub.

https://github.com/peterpeterparker/testLoadPush.git

@jgw96 or ionic team, won't you mind having a look before releasing RC.4 ... it's so less code I really don't know what I miss or what's wrong with my configuration...but if I'm not wrong, that could be a good quality check on the RC.4

Ionic info:

Your system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.3-201612122136
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.0 Build version 8A218a

Chrome up-to-date

With node 6.9.1 same problem

[jsayol]

I stumbled upon this too so I did some digging, and the problem seems to be with dismissing a LoadingController when the dismissOnPageChange option is set to true. This is independent of NavController, any way of dismissing the LoadingController will trigger the exception. For example, a simple way to reproduce:

this.loading = this.loadingCtrl.create({dismissOnPageChange: true});
this.loading.present().then(() => this.loading.dismiss());

Edit: dismissing a LoadingController that has the dismissOnPageChange option is triggering a App.viewDidLeave which in turn triggers the routine to dismiss any views that have the dismissOnPageChange option, including the one that was just dismissed.

There should be a check here to make sure the view hasn't already been dismissed, but I don't see any relevant property in ViewController.

[peterpeterparker]

@jsayol thx for digging and adding your informations, so happy to hear that I'm not the only one facing that problem ;) I edited the title of the issue to make it more general.

[jsayol]

Ok, got it. Adding a .catch() when dismissing prevents the unhandled exception. The fix is easy, just change the line here to this:

view.dismiss().catch(() => {});

I'll create the PR.

[brandyscarney]

Thank you for the issue and all of the debugging! We've merged a fix for this and I've released a nightly with it:

npm install --save ionic-angular@2.0.0-rc.4-201612211600

Please try it out and let me know if you find any issues. 😄

[peterpeterparker]

2.0.0-rc.4-201612211600 fix that problem, thx for the fix!

For the record, while testing the nightly, I noticed following new problem which breaks my app. Rolling back to RC.4 official here.

#9751

[jabas06]

Hello @brandyscarney. I'm still having this issue using the latest nightly (2.0.0-rc.4-201612220408). You can take a look at this plnkr.

http://plnkr.co/edit/Ug1WQiOcFUbrSb2UlVFH?p=preview

Steps to reproduce:

1. Click on Login
2. A loader is displayed
3. The app navigates to HomePage
4. The error "Error: Uncaught (in promise): false" is logged to the console.

[jsayol]

@jabas06 You don't need to .dismiss() the loader since you already set the dismissOnPageChange option. If you skip dismissing before setRoot() then everything works smoothly.

It does feel like an error though since I'm sure many users will have very similar code on their apps. That exception should not be thrown.

[brandyscarney]

@jabas06 Could you create a separate issue for this with the same information and tag me in it please? 😄

[kudsyf]

am getting the same error but for just setting the rootPage !!

the code in the app.component.ts

af.auth.subscribe( user => {
if (user) {
this.rootPage = ContactPage;
} else {
this.rootPage = LoginPage;
}
});

its just angularFire auth check, and as soon as the ContactPage is Showen, i receive the following Error

Runtime Error
Uncaught (in promise): false
Stack
Error: Uncaught (in promise): false
at s (http://localhost:8100/build/polyfills.js:3:4211)
at s (http://localhost:8100/build/polyfills.js:3:4034)
at http://localhost:8100/build/polyfills.js:3:4574
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9723)
at Object.onInvokeTask (http://localhost:8100/build/main.js:35478:37)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9659)
at e.runTask (http://localhost:8100/build/polyfills.js:3:7083)
at i (http://localhost:8100/build/polyfills.js:3:3671)
at HTMLElement.invoke (http://localhost:8100/build/polyfills.js:3:10876)
Ionic Framework: ^2.0.0-rc.4
Ionic Native: 2.2.11
Ionic App Scripts: 0.0.48
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.2
OS Platform: Windows 8.1
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

[IngvarOlsen]

Seems I got somewhat the same problem.
It comes from just poping and then pushing to another page without passing any info.
It works fine if I just push though without the pop.
Just went back to rc 2 and it works perfectly.

Error: Uncaught (in promise): false
at s (http://localhost:8100/build/polyfills.js:3:4211)
at http://localhost:8100/build/polyfills.js:3:3961
at Object.ti.reject (http://localhost:8100/build/main.js:28161:23)
at NavControllerBase._postViewInit (http://localhost:8100/build/main.js:28309:16)
at NavControllerBase._viewTest (http://localhost:8100/build/main.js:28446:25)
at NavControllerBase._nextTrns (http://localhost:8100/build/main.js:28218:25)
at NavControllerBase._queueTrns (http://localhost:8100/build/main.js:28182:14)
at NavControllerBase.pop (http://localhost:8100/build/main.js:28047:21)
at LoginPage.pushPageToMap (http://localhost:8100/build/main.js:56013:22)
at CompiledTemplate.proxyViewClass.View_LoginPage0.handleEvent_26 (/AppModule/LoginPage/component.ngfactory.js:308:34)

Ionic Framework: 2.0.0-rc.4-201612211600
Ionic Native: 2.2.11
Ionic App Scripts: 0.0.47
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.2
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

[brandyscarney]

Can you please test using the latest nightly and if it's still an issue please provide a repository or plunker that we can use to reproduce?

[luciandarabus]

@jgw96 - I am not using a loading component if you are referring to https://ionicframework.com/docs/v2/components/#loading. My app is a simple integration with firebase and authentication.
I noticed that event the tutorial that I am using to learn ionic 2 & firebase has the same error. You can find the repo here: https://github.com/javebratt/ionic-firebase-email-auth

[jgw96]

@luciandarabus so just to be clear, you get this error only with the latest nightly right? On rc.4 you do not get the error?

[luciandarabus]

I get the error both with RC4 and with 2.0.0-rc.4-201701062325.

[jgw96]

Hey @luciandarabus thanks for all the info so far. Do you have a repo i can test this issue with? The repo you posted above is on RC.1. I cannot seem to reproduce this with my own app using Firebase and running on the latest nightly unfortunately.

[jgw96]

Hey @luciandarabus quick update on this. I am now able to repro with firebase but cannot repro in an app not using firebase. Can you confirm that you get the same behavior?

[luciandarabus]

Hey @jgw96. Yes, I am seeing the same behaviour. Once you add firebase and you have to login the error will show up. When you are already logged in and you do a refresh that will trigger the this.rootPage = HomePage in my code there is no error. Tried with rc5 and I get the same error at login.

[javebratt]

Hey people,

I had been banging my head against my keyboard with this for a while, until one of my blog readers pointed something that made me take a look at the view changing process I was using (If you're reading this, I don't remember who you are so sorry for not giving you proper credit 😞).

The issue seems to happen when Firebase is returning a Promise from the Login, Signup or LogOut methods, so I started to check those to see what was going on and on every single method I had a .then()

Inside that promise return I was sending the user to a different page.

For example, after a user logged out, I'd send him to the LoginPage:

firebase.auth().signOut().then( () => {
navCtrl.setRoot(LoginPage);
});

And in my head that was ok, the problem here comes from the onAuthStateChange() listener I use on my app.component.ts file (or the .auth().subscribe() if you're using AngularFire2)

It's already listening to the auth changes and setting the rootPage depending on whether there's a logged in user or not:

firebase.auth().onAuthStateChanged((user) => {
      this.zone.run( () => {
        if (!user) {
          this.rootPage = LoginPage;
        } else { 
          this.rootPage = HomePage;
        }
      });     
    });

The thing there is that when my users log-out it's 1) trying to set the rootPage via the auth listener and 2) trying to return a promise that sets the rootPage also.

That caused the Promise uncaught error in almost every case, especially when using other view components such as alerts and loading spinners.

The easy solution to keep returning the promise after the function is to unsubscribe from the auth listener:

const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
      this.zone.run( () => {
        if (!user) {
          this.rootPage = LoginPage;
          unsubscribe();
        } else { 
          this.rootPage = HomePage;
          unsubscribe();
        }
      });     
    });

That way my code isn't breaking anymore, I handle the auth listening part when the user first loads the app and then it unsubscribes, so I handle the pushing or root setting in every promise I return.

Another thing you could do is to leave the auth listener active and just don't push or setRoot after login, logout or signup.

Please take a look and test yourselves, let me know if this also fixes it for you or if there are use-cases when it keeps happening.

[conradchou2004]

for AngularFire2:

const authObserver = af.auth.subscribe( user => { if (user) { this.rootPage = HomePage; authObserver.unsubscribe(); } else { this.rootPage = LoginPage; authObserver.unsubscribe(); } });

[naoshgloria]

what does 'zone' represents?

[Anujmoglix]

I am facing issue : @import "ionic.ionicons";

[mjastrzebowski]

The issue is back in Ionic 3.0.0...

[AleFons]

On Ionic 3.0.0 beta 3; this issue is definitely back. I'm unsure what triggers it exactly, but I've had the same code fail sometimes and then work other times.

[mayurmarwa]

Can confirm that the issue is back in Ionic 3.0.0

[brandyscarney]

Can anyone that is having the issue in 3.0.0 please give me some steps to reproduce it? Thanks!

[mayurmarwa]

@brandyscarney I wouldn't know how to instruct you to reproduce the issue but it seems to be related to angularfire2, firebase or the loading controller, as was the case with this issue initially I assume. If there's anything else I could share, do let me now

[AleFons]

An user on another issue has shown a workaround - or, perhaps, the correct way to do it - which is utilize loading.present().then(() => {}) and only call loading.dismiss() inside the then block. It appears that the loading.dismiss() is being called before the loading component has been presented completely and is thus causing an error.

The issue in question: #10588

[neo-split]

Hi @brandyscarney , Im on "ionic-angular": "3.0.1", and am having same issue. This is how Im using all my loading components.

  // sing-in with email + pass
  loginUser() {

    // Show loading
    this.displayLoading(); 

    this._authSrv.signInWithEmail(this._loginForm.value.email, this._loginForm.value.password)
      .then( (user) => {
        // Go to Homepage, loading will be dismissed automatically since 
        // dismissOnPageChange( )is set to true
        this._navCtrl.setRoot(HomePage);
      })
      .catch( (error) => {
        this.dismissLoading();
        this.showAlertToUser(error);
      });
  }

  // Display loading ctrl
  displayLoading() {
    // create it first
    this._loading = this._loadingCtrl.create({
      dismissOnPageChange: true,
    });

    // then display
    this._loading.present()
      .catch ( (error) => {
        this.showAlertToUser(error);
      })    
  }

  // Dismiss loading ctrl
  dismissLoading() {
    this._loading.dismiss()
      .catch ( (error) => {
        this.showAlertToUser(error);
      })
  }

[wmehanna]

Hello @brandyscarney , I have the same kind of code as @neo-split with the same issue.... Using ionic-angular 3.0.1 as well.

Thank you !

[speedfl]

I am not using firebase for auth.
However since I put the push notification in place I am getting the issue.
In fact what I am doing is pretty simple.
I am using my own auth process.
Then when the authentication is confirmed I rerrot to a page by providing in the navParams the loadingController.

Then when I arrive in user page I use dismiss() and I am getting the issue.

By adding the catch it solved the issue.

To reproduce it is pretty simple I think:

Use https://github.com/aggarwalankush/ionic2-push-base
Create a connection page which call a connectionService
In the connectionService put

connect() : Promise<any> {
setTimeout(() => {
return Promise.resolve(true);
}, 1000)
}

Then in connectionPage launch a loadingController, call connect and reroot to homePage once resolve.

let loading = this.loadingCtrl.create({
            content: "Loading"
          });
loading.present();
this.connectionService.connect().then(()=> {
this.nav.setRoot(TabsPage, {spinner : loading});
})

And then in TabsPage:

ionViewWillEnter(){
var spinner = this.navParams.get('spinner')
      if(spinner){
        spinner.dismiss().catch(err => {
          console.log("Error on dismiss");
          console.log(err)
        });
      }
}

I am now getting the issue caught. This is only working when I using ionic run android

I don't know why I am getting such issue since I put push notification. I did not touch this part of the code and the spinner is well dismissed even if I get the error.

My version of ionic-angular is 2.1.0.

[dhameer]

Still not working on ionic 3.3.0. Followed https://docs.ionic.io/services/auth/facebook-native.html#injecting-facebookauth-and-user

_

main.js:1582 ERROR Error: Uncaught (in promise): [object Object]
at c (polyfills.js:3)
at c (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (main.js:4617)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3)
at
defaultErrorLogger @ main.js:1582
ErrorHandler.handleError @ main.js:1642
IonicErrorHandler.handleError @ main.js:148036
next @ main.js:5255
schedulerFn @ main.js:4328
SafeSubscriber.__tryOrUnsub @ main.js:16187
SafeSubscriber.next @ main.js:16136
Subscriber._next @ main.js:16078
Subscriber.next @ main.js:16042
Subject.next @ main.js:19788
EventEmitter.emit @ main.js:4314
NgZone.triggerError @ main.js:4686
onHandleError @ main.js:4647
t.handleError @ polyfills.js:3
r.runGuarded @ polyfills.js:3
(anonymous) @ polyfills.js:3
n.microtaskDrainDone @ polyfills.js:3
o @ polyfills.js:3

_

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#145