Как использовать несколько выходов маршрутизатора в angular2?

У меня есть основной router-outlet, который используется для отображения экрана входа в систему (/login) и экрана основного содержимого (который отображается после входа в систему) (/main).

Когда пользователь находится на экране контента, я хочу показать навигационную панель сверху с двумя вариантами (скажем, «Обзор», «Полезная информация»). Эта панель навигации является общей для OverviewComponent и InsightsComponent.

Под этой навигационной панелью я хочу показать другой маршрутизатор-выход, который будет загружать OverviewComponent или InsightsComponent в зависимости от того, что пользователь щелкает в навигационной панели. Если я укажу «/overview» и / «insights» в качестве маршрута, он сразу покажет мне соответствующий компонент, но не панель навигации.

Ниже приведена моя текущая конфигурация маршрутизации (это неправильно):

const appRoutes: Routes = [
  { path: 'main', component:  MainComponent},
  { path: 'overview', component:  OverviewComponent},
  { path: 'insights', component: InsightsComponent },
  { path: 'login', component: LoginComponent },
  { path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

Пожалуйста, дайте мне знать, сможем ли мы добиться этого в angular2 angular4. Я использую следующую версию:

"@angular/core": "^4.0.0"
"@angular/router": "^4.0.0"
"@angular/cli": "1.0.1"

******************Попытка 2 - Все еще не работает******************

const appRoutes: Routes = [
  { path: 'main',
    children: [
      { path: '', component: MainComponent },
      { path: 'overview', component:  OverviewComponent },
      { path: 'insights', component: InsightsComponent },
    ]

  },
  { path: 'login', component: LoginComponent },
  { path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

*******Попытка 2 - Код Sudo со всеми компонентами - Все еще не работает *******

//app.component.html

<router-outlet></router-outlet>


//app.module.ts

const appRoutes: Routes = [
  { path: 'main',
    children: [
      { path: '', component: MainComponent },
      { path: 'overview', component:  OverviewComponent },
      { path: 'insights', component: InsightsComponent },
    ]

  },
  { path: 'login', component: LoginComponent },
  { path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

//login.component.html
<div class="text-center vertical-center">
    <form>
        <div class="horizontal">
            <label for="">Email</label>
            <input class="form-control" type="text" name="" value="">
        </div>
        <div class="horizontal">
            <label for="">Password</label>
            <input class="form-control" type="password" name="" value="">
        </div>
        <button class="btn btn-primary" (click)="navigate()">Login</button>
    </form>
</div>

//login.component.ts
navigate() {
    this.router.navigate(['./main']);
  }

//main.component.html

<app-header></app-header>
<router-outlet></router-outlet>


//app.header.html

<ul class="nav navbar-nav">
               <li class=""><a routerLink="/main/overview" routerLinkActive="active">OVERVIEW</a></li>
                <li class=""><a routerLink="/main/insights" routerLinkActive="active">INSIGHTS</a></li>
            </ul>

//overview.html
<p>This is overview section</p>

//insights.html
<p>This is insights section</p>

**********Попытка 3 - Работает *********

const appRoutes: Routes = [
  { path: 'main', component: MainComponent,
    children: [
      { path: '', component: MainComponent },
      { path: 'overview', component:  OverviewComponent },
      { path: 'insights', component: InsightsComponent },
    ]

  },
  { path: 'login', component: LoginComponent },
  { path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];