Ленивая загрузка подмодулей подмодуля в приложение

Question

Я пишу угловое приложение, само приложение лениво загружает home.module в '' путь на основе некоторых решений, иначе будут загружены другие модули

Когда home.module загружается, он загружается с навигационной панелью (отдельный компонент) с 4 опциями меню. Теперь, когда я нажимаю на любой из пунктов, я должен перейти к соответствующему модулю. Но Angular жалуется, что не может соответствовать ни одному маршруту.

вот фрагменты из моих файлов

приложение-routing.ts

import { HomeGuardService } from './route-guard/home-guard.service';

const routes: Routes = [ 
    { 
    path: '', 
    pathMatch: 'full', 
    loadChildren: () => import('./components/home/home.module').then(mod => mod.HomeModule),
    canActivate: [HomeGuardService] }, 
    // other routes go here
 }]; 
 @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) 
 export class AppRoutingModule { }

дом-routing.ts

import { HomeComponent } from './home.component'; 


const routes: Routes = [ { 
    path: '', 
    pathMatch: 'full', 
    component: HomeComponent, 
    children: [ 
        { 
            path: 'search', 
            pathMatch: 'full', 
            loadChildren: () => import('./search/search.module').then(mod => mod.SearchModule) 
        }, 
        { 
            path: '/settings', 
            pathMatch: 'full', 
            loadChildren: () => import('./settings/settings.module').then(mod => mod.SettingsModule) 
        }] 
    } ] 
    @NgModule({ imports: [ RouterModule.forChild(routes) ], exports: [ RouterModule ] }) 
    export class HomeRoutingModule { }

Поиск-routing.module.ts

import { SearchComponent } from './search.component'; 

const routes: Routes = [ { path: '', component: SearchComponent } ]; 
@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
}) 
export class SearchRoutingModule { }

домашняя component.html

<div>
    <div class="header">
        <app-header></app-header>
    </div>
    <div>
        <!-- main app content : routing content goes here -->
    </div>
    <div class="footer">
        <app-nav-menu (sendMenuSelection)="changeRoute($event)"></app-nav-menu>
    </div>
</div>

дом-component.ts

export class HomeComponent implements OnInit { 

    constructor( private router: Router ) { }

    private changeRoute(menuSelection) { t
    this.router.navigate([menuSelection]); 
    }
}

Теперь у компонента nav-menu есть 4 кликабельных значка, которые выдают событие домашнему компоненту, как вы можете видеть выше. В component.ts я пытаюсь использовать router.navigate для перехода к соответствующему пути.

Я хочу, чтобы маршрут загружался как таковой в корневой путь - / search, / settings и т. Д.

Я относительно новичок в angular и буду признателен за любую помощь в устранении этой ошибки, которую я вижу.

Спасибо!