javascript - Vista de Angular no renderizada pero URL de la ruta cambiando

En mi aplicación Angular 9, la vista blog-detail no cambia al hacer clic en el componente recent-blog, pero la URL del enrutador sí cambia en el navegador. Pero cuando actualizo manualmente la página con la URL recién adquirida, la vista ahora cambia con éxito. Puedes revisar mi repositorio aquí. A continuación está mi código que hice para el enrutamiento y la representación de los componentes

módulo de enrutamiento :

const routes: Routes = [
  {path: 'blog/:id', component: BlogDetailComponent}];

@NgModule({
  declarations: [
    RecentBlogComponent,BlogCategoryComponent,BlogDetailComponent ],
imports: [
    RouterModule.forChild(routes),CommonModule,ClientRoutingModule, FormsModule,ReactiveFormsModule],
  exports: [
    RouterModule,RecentBlogComponent,BlogCategoryComponent,BlogDetailComponent]})
export class ClientModule { }

blog-detail.component.html:

<div class="container">
  <div class="row">
    <div class="col bottom">
      <div class="col-md-12" *ngIf="currentBlog">
        <h1>{{currentBlog.title}}</h1><hr>
         <div class="img-responsive"><img src="http://localhost/Angular7Blog/api/uploads/{{currentBlog.image}}" class="img-responsive"></div>
         <hr><br>
         <div [innerHtml]="currentBlog.description"></div>
      </div></div>
    <div class="col-12 col-md-3 order-2 order-md-2" style="margin-top: 1.1%;">
      <app-recent-blog></app-recent-blog>
      <app-blog-category></app-blog-category>
  </div></div></div>

blog-detail.component.ts:

export class BlogDetailComponent implements OnInit {
   public currentBlog: Blogpost;
     constructor( private route: ActivatedRoute, private router: Router, private blogpostService: BlogpostService, private titleService: Title) { }
 ngOnInit() {
    console.log('blog-detail ngOnInit called')
    let myBlogId = this.route.snapshot.paramMap.get('id');
    console.log(myBlogId);
    this.blogpostService.getSingleBlogInformation(myBlogId).subscribe(
                (data: Blogpost) =>{ console.log(data); this.currentBlog = data; }
                error =>{ console.log("some error occured");}

recent-blog.component.html:

<div class="container">
  <div class="row">
    <div class="col-12">
      <h6 class="text-muted">Recent Blogs</h6> 
      <ul class="list-group" *ngFor="let blog of blogs">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <div class="image-parent">
            <a [routerLink]="['/blog', blog.id]">
              <img src="http://localhost/Angular7Blog/api/uploads/{{blog.image}}" class="img-fluid" alt="image">
            </a>
            </div>
              <a [routerLink]="['/blog', blog.id]">
                {{blog.title}}
              </a></li></ul></div></div></div>