Angular 6 не перенаправляет со страницы входа на панель управления с боковой панелью

Question

У меня есть приложение со страницей входа в систему, которое должно перенаправляться при успешном входе в систему на панели инструментов с боковой панелью выбора.В настоящее время я могу перенаправить только на панель инструментов без боковой панели. ОБРАТИТЕ ВНИМАНИЕ Я обновил код

Вот страница индекса:

<nav>
  <div class="row">
    <div class="col-md-8">
      <a href="/dashboard"><img src="https://www.valcaulin.com/wp-content/uploads/2017/10/Globe-logo-2.png">
      </a>
      <span class="icon-label label-left">Spartacus Portal</span>
    </div>
    <div *ngIf="userLoggedIn()" class="right-side my-auto nav-item dropdown col-md-4" role="button" id="navbarDropdown"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
      <div class="row">
        <div class="col-md-9" align="right">
        <div class="icon-label label-right" >{{username}}</div>
       <div>{{myDate | date:'MMMM dd, yyyy'}}</div>
      </div>
      <div class="col-md-3">
      <i class="material-icons icon my-auto">account_circle</i>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#" (click)="logout()">Logout</a>
       </div>
       </div>
      </div>
    </div>
  </div>
</nav>

Вот исправленный app-component.html

<router-outlet></router-outlet>

Вот мой пересмотренный app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CollectionsComponent } from './collections/collections.component';
import { BillingComponent } from './billing/billing.component';
import { ApplicationsettingsComponent } from './applicationsettings/applicationsettings.component';
import {AuthGuard} from './auth/AuthGuard';
import {UsermanagementComponent} from './usermanagement/usermanagement.component';
import {UploadComponent} from './upload/upload.component';
import { ViewreportsComponent } from './viewreports/viewreports.component';
import {SidebarComponent} from './sidebar/sidebar.component';

const routes: Routes = [
    {
        path: '',
        component: SidebarComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: 'dashboard',
                component: DashboardComponent,
                canActivate: [AuthGuard]
            },
            {
                path: 'collections',
                component: CollectionsComponent,
                canActivate: [AuthGuard]
            },
            {
                path: 'billing',
                component: BillingComponent,
                canActivate: [AuthGuard]
            },
            {
                path: 'applicationsettings',
                component: ApplicationsettingsComponent,
                canActivate: [AuthGuard]
            },
            {
                path: 'upload',
                component: UploadComponent,
                canActivate: [AuthGuard]
            },
            {
                path: 'viewreports',
                component: ViewreportsComponent,
                canActivate: [AuthGuard]
            },
            {
                path: 'usermanagement',
                component: UsermanagementComponent,
                canActivate: [AuthGuard]
            },
            {
                path: 'dashboard',
                component: DashboardComponent,
                canActivate: [AuthGuard]
            },
            {
                path: 'collections',
                component: CollectionsComponent,
                canActivate: [AuthGuard]
            },
            {
                path: 'billing',
                component: BillingComponent,
                canActivate: [AuthGuard]
            },
            {
                path: 'applicationsettings',
                component: ApplicationsettingsComponent,
                canActivate: [AuthGuard]
            },
            {
                path: 'upload',
                component: UploadComponent,
                canActivate: [AuthGuard]
            },
            {
                path: 'viewreports',
                component: ViewreportsComponent,
                canActivate: [AuthGuard]
            },
            {
                path: 'usermanagement',
                component: UsermanagementComponent,
                canActivate: [AuthGuard]
            }
        ]
    },
    {
    path: '',
    component: DashboardComponent,
    pathMatch: 'full',
    canActivate: [AuthGuard]
  },
  {
    path: 'login',
    component: LoginComponent
  }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Мне интересно, подходит ли сборка компонента оболочки, как в посте Угловая - Боковая панель не отображается при входе в систему, но отображается вПанель инструментов - угловая маршрутизация ПРИМЕЧАНИЕ Я использовал существующий компонент боковой панели вместо оболочки, и он работает с получением страницы входа на панель мониторинга, ОДНАКО новые окна боковой панели открываются ПОД окном панели мониторинга,НЕ в этом, как они должны.Любая помощь с благодарностью!