Angular routing does not show the child component

Question

When I try to access the url "funzioniUtenteBase/ricercaModulo", the path is reached but I don't see the component RicercaModuloComponent. I noticed that RicercaModuloComponent is shown if I add "router-outlet" inside home-utente-base-component.html But this way I get the display of both the HomeUtenteBaseComponent and RicercaModuloComponent components. Instead, I want HomeUtenteBaseComponent to disappear and only RicercaModuloComponent remains.

How can I solve? Thanks to you

app-routing.module.ts:

    const routes: Routes = [
  {
    path: "funzioniUtenteBase",
    loadChildren: () => import('./features/components/home-utente-base/home-utente-base.module').then(m => m.HomeUtenteBaseModule)
  },
  {
    path: "funzioniTecnicoDelegato",
    loadChildren: () => import('./features/components/home-tecnico-delegato/home-tecnico-delegato.module').then(m => m.HomeTecnicoDelegatoModule)
  },
  {
    path: "funzioniSupervisore",
    loadChildren: () => import('./features/components/home-supervisore/home-supervisore.module').then(m => m.HomeSupervisoreModule)
  }
];

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

app.component.html:

<div
  class="layout-wrapper"
  [ngClass]="{'layout-menu-horizontal': 'horizontal'}">
  <div class="layout-main">
    <app-toolbar></app-toolbar>
    <app-breadcrumb></app-breadcrumb>
    <div class="layout-content">
      <router-outlet></router-outlet>
    </div>
    <app-footer></app-footer>
  </div>
</div>

home-utente-base-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: HomeUtenteBaseComponent,
    children: [
      {
        path: 'ricercaModulo',
        component: RicercaModuloComponent
      }
    ]
  }
];

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

home-utente-base.component.ts:

<div class="ui-grid-fixed">
  <div class="formgrid grid">
    <div class="field col-12 md:col-3">
      <a
        class="square-box"
        routerLink="./ricercaModulo">
        <img src="./../../../../assets/layout/images/icon-cerca.svg">
        <p>Ricerca modulo</p>
      </a>
    </div>
  </div>
</div>

Answer 1

You just need to define both routes as siblings instead of with parent-child relation and the problem should be solved.

const routes: Routes = [
  {
    path: '',
    component: HomeUtenteBaseComponent,
    pathMatch:'full',
  },
  {
    path: 'ricercaModulo',
    component: RicercaModuloComponent
  }
];

Cheers