4

I have a very basic Ionic Android app using firebase authentication. When the user enter wrong credentials and I catch an error I simply change a reactive property to display the error to user:

  async login() {
    try {
      await this.authService.login(this.email, this.password);
      this.error = "";
    } catch (error) {
      this.error = error;
    }
  }

This functino is called when clicking on login button and the function login in authService looks like this :

  login(email: string, password: string) {
    return this.afAuth.signInWithEmailAndPassword(email, password);
  }

And in my login html page I am trying to display the error like this :

  <p>
    <ion-text color="danger"><i>{{error}}</i></ion-text>
  </p>

Everything is basic nothing fancy, and everythings works perfectly in a browser if I run the app via ionic serve, but it's does not work the same on an Android device after running the app ionic cordova run android.

If the credentials are wrong the error is well catched but not displayed on the interface, unless I click on an input then the error is displayed. I believe that Angular does not detect change, and by using ChangeDetectorRef as described in this solution here it works.

But I find it a hacky way to solve this bug. Why can't angular detect the change itself? why it's working on a browser but not on the mobile device?

I've checked many other similar problems but no one got the issue that it's working on a browser but not on an Android device.

walox
  • 567
  • 1
  • 7
  • 26
  • what happens if in both 'try' and 'catch' blocks you add return statement? basically instead of this.error = error you do 'return this.error = error'? – Sergey Rudenko May 21 '20 at 16:24
  • @SergeyRudenko nothing changed – walox May 21 '20 at 16:28
  • I think it s somehow related to this https://indepth.dev/do-you-still-think-that-ngzone-zone-js-is-required-for-change-detection-in-angular/#common-pitfalls but I still can't figure out why it's woking on a browser and not in an Android device. – walox May 22 '20 at 14:35
  • Yeah interesting issue. I think the crux here is indeed why in case of Android it does not work. Let's eliminate option that your code with 'ionic serve' and 'run android' is not the same. Can you do ionic build -prod and then use www folder and check how it behaves with prod build? alternatively in main.ts enable prod mode. Disabled Prod Mode causes double change detection cycle. – Sergey Rudenko May 22 '20 at 16:34
  • I'll check that asap, meanwhile if you want to play with the code I ve pushed my work on github https://github.com/wal0x/ionic-firebase-auth/blob/d8daa1a7934791265097e1a4749febf084e600ce/src/app/login/login.page.ts#L35 for know I am using the workaround with this.ngZone.run() – walox May 22 '20 at 18:25
  • I changed nothing and it working as expected... I am starting to hate Angular... – walox May 23 '20 at 14:57
  • :) but it can be a lot of other things tbh. i also think try catch error handling like you do might be suboptimal with angular. – Sergey Rudenko May 23 '20 at 15:23
  • @walox I'm facing a similar issue, you managed to find any cause, why is change detection not working as it should? – Véger Lóránd Mar 01 '21 at 08:24
  • @VégerLóránd No, I couldn't find a proper solution , sorry – walox Mar 01 '21 at 08:27

0 Answers0