app-cabecalho não é um elemento conhecido

Ao tentar realizar o procedimento do curso, após criar os módulos de componentes de cabeçalho e rodapé, o sistema compila, porém não renderiza o cabeçalho, mas tão somente o rodapé.

No console, aparece o seguinte erro:

NG0304: 'app-cabecalho' is not a known element:

1. If 'app-cabecalho' is an Angular component, then verify that it is part of this module.
2. If 'app-cabecalho' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

O código do cabecalho.component.ts:

import { Router } from '@angular/router';
import { UsuarioService } from './../../autenticacao/usuario/usuario.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-cabecalho',
  templateUrl: './cabecalho.component.html',
  styleUrls: ['./cabecalho.component.css']
})
export class CabecalhoComponent {

  constructor(private usuarioService: UsuarioService, private router: Router) { }

  user$ = this.usuarioService.returnaUsuario();

  logout(){
    this.usuarioService.logout();
    this.router.navigate(['']);
  }

}

O cabecalho.module.ts:

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 {}

O cabecalho.component.ts está assim:

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

E o app.module.ts:

import { RodapeModule } from './componentes/rodape/rodape.module';
import { CabecalhoModule } from './componentes/cabecalho/cabecalho.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    RodapeModule,
    CabecalhoModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Por fim, o app.component.html:

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

O módulo do cabeçalho está declarando e exportando o componente, o módulo do app está importando o módulo do cabeçalho, as referências estão todas batendo, entretanto ele diz que não reconhece o cabeçalho.

No componente do cabeçalho, entretanto, o VS Code está dando o seguinte aviso, que não sei se afeta esse funcionamento, tento em vista compilar sem problemas:

A propriedade 'usuarioService' é usada antes da inicialização.ts(2729)
cabecalho.component.ts(12, 15): 'usuarioService' é declarado aqui.

Registro, entretanto, que os operadores ternários do Typescript (??) não estão funcionando também, em todos os métodos tive que realizar a checagem manualmente.

Alguém teve problema similar?