Routes not found in angular routing with multiple child modules

I have a module tree in my Angular project, with each module incorporating its own routing. I have a parent module and a number of child modules. Parent module routing works but none of the child routes work: Error: NG04002: Cannot match any routes.

Here is my parent module :

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FrameworkComponent } from './framework/framework.component';
import { AboutComponent } from './about/about.component';
import { HomeListComponent } from './home-list/home-list.component';
import { HomepageComponent } from './homepage/homepage.component';
import { RayonsModule } from './rayons/rayons.module';
import { SharedModule } from './shared/shared.module';
import { NotFoundComponent } from './not-found/not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    FrameworkComponent,
    AboutComponent,
    HomeListComponent,
    HomepageComponent,
    NotFoundComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    PlanningModule,
    RayonsModule,
    SharedModule,
  ],
  providers: [],
  bootstrap: [FrameworkComponent],
})
export class AppModule {}

and here is his routing module :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HomeListComponent } from './home-list/home-list.component';
import { ListesHomeComponent } from './listes/listes-home/listes-home.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: 'about', component: AboutComponent },
  { path: 'listes', component: ListesHomeComponent },
  { path: '', component: HomeListComponent },
  { path: '**', component: NotFoundComponent },
];

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

So far everything is working fine I then have child modules that look like this

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from 'src/app/shared/shared.module';
import { PlanningHomeComponent } from './planning-home/planning-home.component';
import { PlanningRoutingModule } from './planning-routing.module';

@NgModule({
  declarations: [PlanningHomeComponent],
  imports: [CommonModule, SharedModule, PlanningRoutingModule],
})
export class PlanningModule {}

and the routing module :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PlanningHomeComponent } from './planning-home/planning-home.component';

const routes: Routes = [{ path: 'planning', component: PlanningHomeComponent }];

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

And my links are like this :

  <a
    routerLink="planning"
    routerLinkActive="active"
    class="nav-link"
    aria-current="page"
    >Planning</a
  >

I don't understand why it can't find the child routes. Thank you in advance for your precious help.