Angular 4 and angularfire2 router navigate but the previous component is still showing

Question

I'm working on a project using Angular 4 and angularfire2 (firebase), i'm trying to navigate to the home page after the user signed in successfully using a third party (Google or Facebook).

The problem is after the user is authenticated using angularfire2 popup the router navigate properly ( link in the browser change and the home component is visible) but the sign in component still there !!

I'm not sure if the problem is related to angularfire2 sign in popoups or angular 4 itself, any suggestions ?

angularfire2 callback:

signInWithGoogle() {
  this.angularFireAuth.auth.signInWithPopup(new 
  firebase.auth.GoogleAuthProvider()).then((infos) => {
  this.router.navigate['/home'];
  });
}

router config:

const memberSpaceRoutes: Routes = [
       { path: 'sign-in', component: SignInComponent },
       { path: 'home', component: Home},
]

Answer 1

I am not sure about the explanation, but you are outside of a context that angular would know about (in particular a zone)

Import NgZone and using inside your then

this.zone.run(() => {this.router.navigate['/home']})

Answer 2

Try this pathMatch: 'full' in your route config

const memberSpaceRoutes: Routes = [
       { path: 'sign-in', component: SignInComponent, pathMatch: 'full' },
       { path: '/home', component: Home, pathMatch: 'full'},
]

Answer 3

Well, considering your original question, it seems that you may have not provided sufficient information to analyze the root of your problem.

However, it is possible that your code may have thrown some runtime error, and if your code happens to utilize BrowserAnimationsModule, then angular may fail to replace the previous component with the new one but instead append the new component on top of the old ones. This is a known issue, concerning the BrowserAnimationsModule of Angular 4. You can either eliminate the runtime error from your code, or get rid of the BrowserAnimationsModule.

You can check out the issue description at github: https://github.com/angular/angular/issues/19093

Answer 4

It also happened to me. The solution is to trigger the router.navigate method outside the signInWithGoogle function. In more details: The reason is that signInWithGoogle returns a promise, and when triggering the router.navigate method within this function before the promise is completely resolved, the new component (route) is embedded into the current component, which results with both routes rendered. You want to trigger the router.navigate method outside the signInWithGoogle function and only AFTER the promise is resolved, and it should work. At least it worked for me.