在我单击UI之前，signInWithPopup Promise不会执行.catch。 Angular和Firebase

Question

I'm having a trouble with the .signInWithPopup() method provided by AngularFireAuth, you can see more here: firebaseAuthReference

In my auth.service.ts I've the following method.

 signinWithFacebook2() {
        const provider = new firebase.auth.FacebookAuthProvider();
        return this.afAuth.auth.signInWithPopup(provider);
      }

afAuth is been injected in the auth's constructor:

constructor(private router: Router,
              private afAuth: AngularFireAuth){}

I call signinWithFacebook2() when the user click a button in my login.component.ts (click event).

onFacebookLogin() {
    this.authService.signinWithFacebook2()
      .then(
        (res) => {
          this.authService.getTokenId();
          this.router.navigate(['/dashboard']);
        }
      )
      .catch(
        (err) => {
          this.showError = true;
          // TODO fix bug. this code isn't execute until I press the button again.
        }
      );
  }

When the promise is resolved everything is OK, the code is executed correctly but when the reject is been accomplished the code isn't executed until I press the login button again. This is a strange behavior.Hope you have understanded my problem, if not please leve a comment.

Answer 1

try to force change detection on error.

1. add import:

    import { ChangeDetectorRef } from '@angular/core'; 

2. pass reference to constructor:

    constructor(private router: Router, private ref: ChangeDetectorRef, private afAuth: AngularFireAuth) {} 

3. force change detection on error:

    (err) => { this.showError = true; // TODO fix bug. this code isn't execute until I press the button again. this.ref.detectChanges(); ) 

Answer 2

From the docs you provided it looks like you have to catch the errors as the second argument of the .then() function.

onFacebookLogin() {
    this.authService.signinWithFacebook2()
      .then(
        (res) => {
          this.authService.getTokenId();
          this.router.navigate(['/dashboard']);
        },
      (err) => {
          this.showError = true;
          // TODO fix bug. this code isn't execute until I press the button again.
        }
      );
  }