Angularfire: Conflict with @angular BrowserAnimationsModule when routing after authentication

[kelle62819]

Version info

Angular:
@angular/cli: "1.2.0"

Firebase:
firebase": "4.1.3",

AngularFire:
angularfire2: 4.0.0-rc0

How to reproduce these conditions

Steps to set up and reproduce

Add Angular animations and angularfire to angular-cli project:

• import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  Navigate on Login
• Call router.navigate to change routes after logging in with AngularFireAuth
  this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()).then((data) => { this.router.navigate(['/lobby']); }); }

Expected behavior

After login/navigate show only component for new route

Actual behavior

After login/navigate components for previous roure and new route are shown. After 10-25 seconds the previous route disappears. If you do multiple successive login/logouts that navigate between Home route and Lobby route the Home and Lobby components multiply
Before:

After-Login:

20 Seconds after login:

After multiple login/logouts

[davideast]

@kelle62819 Can you create an github repo that reproduces this? If so I'll be happy to take a look.

[kelle62819]

Here you go: https://github.com/kelle62819/conflict
You should see the behavior described. When you take out the BrowserAnimationsModule everything works properly.

Thanks for looking at this.

[kelle62819]

@davideast Were you able to reproduce this?

[karlvd]

I experience the same issue, I use the BrowserAnimationsModule and experience ~20 delay when routing, I also notice that the delay occurs when changing things in the template with a variable.
For example;
this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()).then((data) => { this.showThing = true;

And in the template you have
<div * ngIf="showThing">show me</div>

So for some reason is seems that change detection is not triggered for a while after the promise resolves.

It´s possible to workaround it by manually triggering change detection for dom manipulation

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

constructor(    
    private cd: ChangeDetectorRef
  ) 

this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()).then((data) => { 
this.showThing = true;
this.cd.detectChanges();

Unfortunately it doesn´t work while routing since you are leaving the view and no code after the routing statement will execute, and you can´t trigger change detection in the new view until it´s rendered.

No solution really but I thought it might help and may be easier to troubleshoot looking at change detection with a simple template manipulation than with routing.

[sudhan-impekable]

+1

[ChakrounAnas]

I have exactly the same issue !

[davideast]

@kelle62819 Can you try the latest version and see if this is still a problem?

npm i angularfire2@next

[kelle62819]

I tried upgrading and am running into this error: (not my post, but I am getting the same error)
https://stackoverflow.com/questions/46557694/update-issues-in-angularfire-5-0

[davideast]

@kelle62819 You need to also upgrade to Firebase 4.5.0. Let me know if that works.

[davideast]

Closing but feel free to open a new issue if the problem exists.

[jalerg]

I've been very frustrated about this issue. It was happening to me too even when I updated to Angular 5.0.0, AngularFire2 5.0.0-rc.3, and firebase 4.6.1;

I have a login component that does a this.router.navigate(['dashboard']) on successful firebase google login, however both the sign in component and the dashboard components are rendered after the routing event triggers a few seconds after the popup closes. And it only happens when I add the BrowserAnimationsModule to the project. If I remove the module everything works fine.

I tried setTimeout() but it didn't help. I was ready to give up, either choosing to not use the animations module, or to replace the signin setup with a dropdown auth component on the navigation bar on my dashboard instead, however I was googling something else when I found NgZone and I managed to make my desired setup work fine by using zone.run() like:

this.afAuth.auth.signInWithPopup(this.googleProvider)
      .then((result) => {
        // ...

        // Redirecting without this.zone.run() messes up routing, and change detection
        this.zone.run(() => {
          this.router.navigate(['/', 'app', 'dashboard']);
        });
      })

It works for me! no 20 second delay to route, no issues with the 'from' component being left in the DOM, and all my animations work fine!

I hope this helps