Angular 5 router does not work properly in google login callback

Question

I am building web app which has login and dashboard and simple routing;

I have two login options and routes:

Login options:

1. With email:

   login(u) {
       this._loginService.login(u)
          .subscribe(data => {
             console.log('Email login successful!');
             this._router.navigate(['/dashboard']);
          });
   

2. With google:

   googleLogin() {
   gapi.auth2.authorize({
       client_id: *
       scope: 'email',
       response_type: 'code',
       prompt: 'select_account'
     },
     (response) => {
       if (response.error) {
         return;
       }
       this._loginService.loginWithGoogle(response)
         .subscribe(response1 => {
           console.log('Google login successful!');
           console.log(response);
           this._router.navigate(['/dashboard']);
         });
     });
   

3. Router options:

   const appRoutes: Routes = [ { path: 'dashboard', component: MainComponent}, { path: 'login', component: LoginComponent }

When login with email succeeds, router navigates and no problem occures.

The problem is that when google logs in with google sign in and router navigates to /dashboard, app crashes in that ways:

1. if i press button to change route, it just displays it view and does not remove my dashboard from dom.
2. sometimes login page is not removed from dom
3. other functions does not work in my code.
4. NO ERRORS IN CONSOLE

when I reload the page, everything works just fine.

Answer 1

To solve this, try that!

constructor(private zone: NgZone) {
    ...
    ...

      this.zone.run(() => {
         this._router.navigate(['/dashboard']);
       });

Reference: Angular 2 ngOnInit not called