Angular 11 – ‘No se puede encontrar ninguna ruta’ utilizando enrutamiento de hijos

Tengo un proyecto de Angular 11 con varios módulos y estoy intentando implementar el enrutamiento.

Según la documentación, hice lo siguiente:

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'articles',
    loadChildren: () => import('./modules/articles/articles.module').then(m => m.ArticlesModule)
  }
];

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

articles-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ArticleComponent } from './components/article/article.component';
import { ArticlesComponent } from './components/articles/articles.component';

const routes: Routes = [
  {
    path: '',
    pathMatch: "full",
    component: ArticlesComponent,
    children: [
      {
        path: ':articleId',
        component: ArticleComponent
      }
    ]
  }
];

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

El componente ArticlesComponent funciona según lo esperado en localhost:4200/articles, pero cuando intento abrir localhost:4200/articles/48451 para cargar el componente ArticleComponent, obtengo el siguiente error:

No se pueden encontrar rutas. Segmento de URL: ‘articles/48451’
Error: No se pueden encontrar rutas. Segmento de URL: ‘articles/48451’