маршрут меняется, но аутлет не в первый раз

Question

У меня есть выход маршрутизатора в моем компоненте для рендеринга внутренних вкладок, он работает нормально, но когда я хочу перенаправить с одной из вкладок на другую страницу с разным выводом, пусть он меняет маршрут, но не загружает данные новой страницы для первойвремя, и когда я обновляюсь, все работает нормально:

это мой поисковый компонент:

<div class="bg-white">
    <div class="container d-flex justify-content-center">
        <ul class="nav secondary-nav alternate search-tab">
            <li class="nav-item">
                <a  class="nav-link"
                    routerLinkActive="active"
                    routerLink="/search/by-voucher-code"
                    jhiTranslate="search.searchByVoucherCode.title">
                    Search By Voucher Code
                </a>
            </li>
            <li class="nav-item">
                <a  class="nav-link"
                    routerLinkActive="active"
                    routerLink="/search/by-national-identifier"
                    jhiTranslate="search.searchByNationalIdentifier.title">
                    Search By National Identifier
                </a>
            </li>
            <li class="nav-item">
                <a  class="nav-link"
                    routerLinkActive="active"
                    routerLink="/search/by-pass-number"
                    jhiTranslate="search.searchByPassNumber.title">
                    Search By Pass Number
                </a>
            </li>
        </ul>
    </div>
</div>
<div id="content" class="py-5 my-5 search-container">
    <div class="container my-5 py-5">
        <router-outlet></router-outlet>
    </div>
</div>

моя конфигурация маршрута:

export const SEARCH_ROUTE: Routes = [
    {
        path: 'search',
        component: SearchComponent,
        canActivate: [AuthenticatedStateGuardResolverService, SelectedAgentGuardAndResolverService],
        data: {
            authorities: [],
            pageTitle: 'search.title'
        },
        children: [
            {
                path: '',
                pathMatch: 'full',
                redirectTo: '/search/by-voucher-code'
            },
            {
                path: 'by-voucher-code',
                component: SearchByVoucherCodeComponent,
                data: {
                    authorities: [],
                    pageTitle: 'search.searchByVoucherCode.title'
                }
            },
            {
                path: 'by-national-identifier',
                component: SearchByNationalIdentifierComponent,
                data: {
                    authorities: [],
                    pageTitle: 'search.searchByNationalIdentifier.title'
                }
            },
            {
                path: 'by-pass-number',
                component: SearchByPassNumberComponent,
                data: {
                    authorities: [],
                    pageTitle: 'search.searchByPassNumber.title'
                }
            }
        ]
    },
    {
        path: 'receipt',
        component: ReceiptComponent,
        canActivate: [SelectedAgentGuardAndResolverService, ReceiptDataByVoucherResolverService],
        data: {
            authorities: [],
            pageTitle: 'receipt.title'
        },
        resolve: {
            receiptData: ReceiptDataByVoucherResolverService
        }
    }
];

при нажатии кнопки поиска следует перейти на страницу квитанции, но она не работает в первый раз:

текущий URL: http://localhost:9060/receipt