Угловой маршрутизатор.Проблема с именованным выходом во вложенных маршрутах

Question

Я использую приложение, сгенерированное с помощью jHipster , и пытаюсь заставить систему навигации работать так:

/ --> Site root (main.component). Redirects to /home.
  /home  (home.component)
  /admin (adm.component)
    /groups   (group.component)
    /contacts (contact.component)
  /questions (question.component)

Идея состоит в том, чтобы использовать разные макеты для домаАдмин и вопросы.Все дочерние маршруты администратора должны иметь одинаковое расположение, но не то же самое, что дом или вопросы.Родные и административные дочерние элементы отображают одну и ту же панель инструментов.

При настройке маршрутов с помощью Angular Router я указываю admin в качестве родителя для компонента с именем AdminComponent, а панель инструментов указывается в качестве дочернего выхода с именем navbar,используя класс NavbarComponent.

Моя проблема - ошибка отображения контактов в консоли.Группы не имеют этой проблемы и отображаются правильно.

Я получаю ошибку для контактов: "Неверная конфигурация маршрута 'admin /': у безкомпонентного маршрута не может быть заданного имени выхода" .

Отладка ошибки, я вижу это:

Если я удаляю розетку navbar, я могу отображать контактыно без панели инструментов.Для краткости я включаю только самую важную часть моего кода.Спасибо за вашу помощь.

contact.route.ts

export const contactRoute: Routes = [{
    path: 'admin',
    component: AdminComponent,
    children: [
        {
            path: '',
            component: NavbarComponent,
            outlet: 'navbar'
        },{
            path: 'contact',
            component: contactComponent,
            data: {
                authorities: ['ROLE_USER'],
                pageTitle: 'contactsApp.contact.home.title'
            },
            canActivate: [UserRouteAccessService]
        }, {
            path: 'contact/:id',
            component: contactDetailComponent,
            data: {
                authorities: ['ROLE_USER'],
                pageTitle: 'contactsApp.contact.home.title'
            },
            canActivate: [UserRouteAccessService]
        }
    ]
}];

app.route.ts

import { Route, Routes } from '@angular/router';
import { JhiMainComponent } from './layouts';

export const mainRoute: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'home'
    },
    {
        path: '',
        component: JhiMainComponent
    }
];

main.component.html

<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>

home.component.html

<div>
    <router-outlet name="navbar"></router-outlet>
</div>
<div class="container-fluid">
    <jhi-footer></jhi-footer>
</div>

adm.component.html

<div>
    <router-outlet name="navbar"></router-outlet>
</div>
<div class="container-fluid">
    <div class="card jh-card">
        <router-outlet></router-outlet>
    </div>
    <jhi-footer></jhi-footer>
</div>

adm.component.ts

@Component( {
    selector: 'admin',
    templateUrl: './adm.component.html'
} )
export class AdminComponent  {
}