Header duplicado

meu header está aparecendo duas vezes. Um embaixo do outro

 <app-cabecalho></app-cabecalho>
 <app-cabecalho></app-cabecalho>
<router-outlet></router-outlet>
<app-rodape></app-rodape>

//app.component.html

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CabecalhoComponent } from './cabecalho.component';

@NgModule({
  declarations: [CabecalhoComponent],
  imports: [CommonModule, RouterModule],
  exports: [CabecalhoComponent],
})
export class CabecalhoModule {}
//cabecalho.module.ts

<header class="sticky-top">
  <nav class="navbar navbar-light bg-white">
    <a class="navbar-brand">gatitobook</a>
    <div *ngIf="user$ | async as user">
      <div *ngIf="user.name; else login">
        <i class="fa fa-user-circle mr-1"></i>
        <a class="mr-1">{{ user.name }}</a>
        <a (click)="logout()">Logout</a>
      </div>
    </div>
  </nav>
  <ng-template #login>
    <span class="navbar-text">
      <a [routerLink]="['']">Login</a>
    </span>
  </ng-template>
</header>
//cabecalho.component.ts