Routing to auxiliary route is not working with router.navigate

In my angular 8 app, when the home page is first loaded, it appends the (sidebar:homesidebar) auxiliary route to the url and loads the homesidebar just fine. On the homesidebar, there is a login button and when clicked it navigates to the login page. The url for the login page includes the homesidebar as expected and shows the homesidebar on the side, but after the user logs in, the sidebar does not change to the user's dashboard specific sidebar and the homesidebar remains visible with the (sidebar: homesidebar) displayed the url bar.

The second problem I'm having is that my code is setup so that if a user attempts to access the user specific dashboard without logging in first like if they were to just type in the url of the user dashboard component into the url bar, then they would be taken to the login page and it would show the homesidebar on the side, but it is not showing it, not even the homesidebar. There is no sidebar shown at all and the url loction bar does not have the the auxiliary route specified (it just shows: localhost:4200/login).

If the user logs in from this malformed page, then they are redirected to their respective dashboard page, but their respective sidebar is not displayed at all. In fact, no sidebar is displayed at all and it is not indicated in the url bar. By debugging the app, I have confirmed that all the variables are being generated in the code for the redirect with router.navigate function. How can I fix these issues? Thanks.

UPDATE:

After logging in, when I manually reload the page in the chrome browser, I can see the right sidebar.

Routes:

const routes: Routes = [

{ path: 'register', component: RegisterComponent },
{ path: 'login', component: LoginComponent },
{ path: 'manager', component: ManagerInterfaceComponent, canActivate: [ManagerGuard] },
{ path: 'employee', component: EmployeeInterfaceComponent, canActivate: [EmployeeGuard],
  children: [
    {path: '', redirectTo: '/employee(sidebar:employeesidebar)', pathMatch: 'full'},
    {path: 'schedule', component: EmployeeScheduleComponent },
  ]
},
{ path: 'vendor', component: VendorInterfaceComponent, canActivate: [VendorGuard] },
{ path: 'aboutus', component: AboutUsComponent },
{ path: 'mission', component: MissionStatementComponent },
{ path: 'contactus', component: ContactUsComponent },
{ path: '', redirectTo: '/home(sidebar:homesidebar)', pathMatch: 'full'},
{ path: 'homesidebar', component: HomeSidebarComponent, outlet: 'sidebar' },
{ path: 'employeesidebar', component: EmployeeSidebarComponent, outlet: 'sidebar' },
{ path: 'home', component: HomeComponent },
{ path: '**', component: PageNotFoundComponent}
];

Employee Guard:

 canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    this.user = this.authService.getUser();

    let role = this.user && this.user.role[0] || null;

    if(role === "employee" && this.authService.isAuthenticated()){
      return true;
    }

    this.router.navigate(['login', { outlets: {"sidebar": ["homesidebar"]}}]);
      return false;

  }

Login Component:

 login() {

    if (this.loginForm.invalid) {
      return;
  }
    this.authService.login(
      {
        username: this.f.username.value,
        password: this.f.password.value
      }
    ).pipe(
      catchError(
        error => {this.badCredentials = true;
        console.log(error); 
        return error;} )
    )
    .subscribe(
        res => {
          let role = res.role[0];
          let sideBarPath = this.processRole(role);

            this.router.navigate([`${role}`, {outlets: {'sidebar': [sideBarPath]}}]);
          }
      );

  }

For the issue of the login page not loading the homesidebar from the redirect in the Guard, I just loaded the url by using the router.navigateByUrl router function instead of router.navigate:

router.navigateByUrl('/login(sidebar:homesidebar)')

As far as the problem with the right dashboard sidebar not being displayed after login, I had to change the navigate function in the login component to this:

this.router.navigate(/${role}, {outlets: {sidebar: null}}], { replaceUrl: true});

the null value removes the homesidebar so that the employeesidebar can be loaded in the route specified in the Routes path for 'employee':

{ path: 'employee', component: EmployeeInterfaceComponent, canActivate: [EmployeeGuard],
  children: [
    {path: '', redirectTo: '/employee(sidebar:employeesidebar)', pathMatch: 'full'},
    {path: 'schedule', component: EmployeeScheduleComponent },
  ]