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

user_5188844 0
Viewed 1114

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},
]
angularfire2 angular
4 Answers

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']})
user_87641120

Try this pathMatch: 'full' in your route config

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

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

user_89973500
Related