Router Appending component instead of replacing it - Angular 18

I am working on a web app, a very simple one. I have implemented a base component which has the header, the footer, the lateral menu and all the components I want on all the pages. The page is a component inside the base one. My problem is that when trying to redirect the component by click the lateral menu in the base component, the requested component is appended instead of replacing the previous one. I've had this issue since this morning and I have no idea where it comes from.

export const routes: Routes = [
    { path: '', component: AppComponent, children: 
        [ {path: '', component: BaseComponent, children: 
            [
                { path: 'ecarts', component: EcartsComponent},
                { path: 'transactions', component: TransactionsComponent},
                { path: 'compte', component: CompteComponent},
                 ]
            }
        ]
    , canActivate: [AuthGuard]},
    { path: 'login', component: LoginComponent, canActivate:[AntiAuthGuard]},
 
];

I've tried :

• removing browseranimationsmodule (was not even here)
• checking for errors in my console (none)
• adding a if router.url.includes('name of the component') both inthe html and ts files
• going to the previous, more stable version of my project (i've deleted 4 hours worth of work so far)
• using zone for the router

And none of these have worked so far...

I imagine all yours pages except the login have the header, footer and side. So you have in your AppComponent (the component you "bootstrap") only

<router-outlet></router-outlet>

This routerOutlet can be replaced by

   <login></login>

or by

   <base-component></base-component>

In your base-component you have

   <header></header>
   <side></side>
   <router-outlet></router-outlet> /<--here goes the children
   <footer></footer>

The paths should become like

export const routes: Routes = [
    {path: '', component: BaseComponent, children: 
        [
            { path: 'ecarts', component: EcartsComponent},
            { path: 'transactions', component: TransactionsComponent},
            { path: 'compte', component: CompteComponent},
        ]
    }, canActivate: [AuthGuard]},
    { path: 'login', component: LoginComponent, canActivate:[AntiAuthGuard]},
];