Не получается подгрузить дочерние роуты

app-routing.module

import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';
import { NgModule } from '@angular/core';

const routes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'catalogs', loadChildren: () => import('./catalogs/catalogs.module').then(m => m.CatalogsModule) },
  { path: '**', redirectTo: '' },
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { enableTracing: false })],
    exports: [RouterModule]
})

export class AppRoutingModule { }

catalogs-routing.module

import { Routes, RouterModule } from '@angular/router';
import { BanksComponent } from '../../../shared/data-table/components/banks/banks.component';
import { StoreComponent } from '../../../shared/data-table/components/store/store.component';
import { NgModule } from '@angular/core';

const routes: Routes = [
    {
        path: '', children: [
            { path: 'banks', component: BanksComponent },
            { path: 'store', component: StoreComponent },
        ]
    }
];

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

export class CatalogsRoutingModule { }

catalogs.module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CatalogsRoutingModule } from './catalogs-routing';
import { DataTableModule } from '../../../shared/data-table/data-table.module';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    CatalogsRoutingModule,
    DataTableModule
  ]
})
export class CatalogsModule { }

pages.module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { LoginModule } from './login/login.module';
import { LoginComponent } from './login/login.component';
import { DashboardModule } from './dashboard/dashboard.module';

import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    LoginModule,
    DashboardModule,
    AppRoutingModule
  ],
  exports: [LoginComponent, RouterModule]
})
export class PagesModule { }

app.mpdule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';

import { CoreModule  } from './core/core.module';

import { HeaderModule } from './presentation/components/header/header.module';
import { FooterModule } from './presentation/components/footer/footer.module';

import { PagesModule } from './presentation/pages/pages.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule,
    BrowserAnimationsModule,
    CoreModule,
    PagesModule,

    HeaderModule,
    FooterModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Вопрос: почему не работает роут http://localhost:4200/catalogs/store вместо этого работает http://localhost:4200/store, http://localhost:4200/catalogs/dashboard. Почему не подгружает как дочерние роуты?