Why do components stack on top of each other in routing in angular 6?

Question

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!

Are you able to create a StackBlitz that reproduces the issue? — user184994, Sep 25 '18 at 18:41
Check if there are errors in the console when you navigate. Also see [this question](https://stackoverflow.com/q/45762690/1009922). — ConnorsFan, Sep 25 '18 at 18:42
Are you by any chance using ES6 Promises outside of Angulars Zones? — Philipp Meissner, Sep 25 '18 at 19:32

score 1 · Answer 1 · answered Jul 23 '19 at 16:08

I ran into a similar stacking route issue while developing in Angular 6 with no errors, and I was able to resolve using the following method. My default route is 'localhost:4200/dashboard' and I added a 'weeklyView' route in the app-routing file. Despite emulating my earlier components, accessing the weeklyView route would make the path become 'localhost:4200/dashboard/weeklyView' and not the desired 'localhost:4200/weeklyView'.

The solution was that when I created my weeklyView Component, it was automatically imported into the app.module file. The component needs to be called in the weeklyView.module, not the app.module, and removing the reference caused the stacking to stop.

I'm not sure if this is your problem since I don't know what your file structure is like, but I would guess that whatever component that the route '/explore' is sending to has been imported in two different modules. And if not, I hope this answer will be helpful to others who have encountered this issue, as I couldn't find any other answers for this particular error.

score 0 · Answer 2 · answered Feb 01 '22 at 18:13

Another reason this might happen is if you have your navigation bar/ menu inside of multiple components.

Your router might be trying to navigate to /dashboard, but you're already inside of the weeklyView component. The router then essentially tries to navigate to weeklyView/dashboard which isn't a valid route most likely.

Try retooling your app to just have your navigation menu available in the same component (most likely app component) where your app-wide router-outlet is made available as well.

Why do components stack on top of each other in routing in angular 6?

2 Answers2