I have a home component, where the user has login option in the navigation bar. After the user logs in with the gmail id, he's redirected to the other component. The problem is that instead of replacing components, routing is stacking components on top of each other. 

There are no errors in the console.

Below is my service.ts code: 

```
import { Injectable } from '@angular/core';
import {AngularFireAuth} from 'angularfire2/auth';
import {AngularFireDatabase} from 'angularfire2/database';
import * as firebase from 'firebase/app';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(public af: AngularFireAuth) { 

  }

  loginWithGoogle() {
    return this.af.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());

  }

  logout() {
    return this.af.auth.signOut().then(() => {
      window.location.assign("https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=http://localhost:4200/");

    })
  }

}

```

login and logout functions are as follows:

```
login() {
    this.authService.loginWithGoogle().then((res) => {
      this.router.navigate(['/explore']);
    })

    }

logout() {
    this.authService.logout().then((res) => {
      this.router.navigate(['/']);
  })
  }

```

I couldn't find any solution, please help me!