Whenever I try to access the URL "funzioniUtenteBase/ricercaModulo," the path is reached but the RicercaModuloComponent is not visible. I have observed that adding "router-outlet" inside home-utente-base-component.html makes the RicercaModuloComponent appear. However, this results in both HomeUtenteBaseComponent and RicercaModuloComponent being displayed simultaneously. What I actually want is for HomeUtenteBaseComponent to disappear and only RicercaModuloComponent to be visible.
How can I resolve this issue? Thank 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>