Erro para exibir mensagem de usuário já existente

Segui a aula e vi os comentários dos demais estudantes aqui no fórum, olhei o meu código porém não achei o erro. Arquivo novo-usuario.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { NovoUsuario } from './novo-usuario';

@Injectable({
  providedIn: 'root',
})
export class NovoUsuarioService {
  constructor(private http: HttpClient) {}

  cadastraNovoUsuario(novoUsuario: NovoUsuario): Observable<any> {
    return this.http.post('http://localhost:3000/user/signup', novoUsuario);
  }

  verificaUsuarioExistente(nomeUsuario: String): Observable<any> {
    return this.http.get(`http://localhost:3000/user/exists/${nomeUsuario}`);
  }
}

Arquivo usuario-existe.service.ts

import { Injectable } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { NovoUsuarioService } from './novo-usuario.service';
import { first, map, switchMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class UsuarioExisteService {
  constructor(private novoUsuarioService: NovoUsuarioService) {}

  usuarioJaExiste() {
    return (control: AbstractControl) => {
      return control.valueChanges.pipe(
        switchMap((nomeUsuario) =>
          this.novoUsuarioService.verificaUsuarioExistente(nomeUsuario)
        ),
        map((usuarioExiste) =>
          usuarioExiste ? { usuarioExistente: true } : null
        ),
        first()
      );
    };
  }
}

novo-usuario.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { minusculoValidator } from './minusculo.validator';
import { NovoUsuario } from './novo-usuario';
import { NovoUsuarioService } from './novo-usuario.service';
import { UsuarioExisteService } from './usuario-existe.service';

@Component({
  selector: 'app-novo-usuario',
  templateUrl: './novo-usuario.component.html',
  styleUrls: ['./novo-usuario.component.css'],
})
export class NovoUsuarioComponent implements OnInit {
  novoUsuarioForm!: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private usuarioExisteService: UsuarioExisteService
  ) {}

  ngOnInit(): void {
    this.novoUsuarioForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      fullName: ['', [Validators.required, Validators.minLength(4)]],
      userName: [
        '',
        [minusculoValidator],
        [this.usuarioExisteService.usuarioJaExiste()],
      ],
      password: [''],
    });
  }

  cadastrar() {
    const novoUsuario = this.novoUsuarioForm.getRawValue() as NovoUsuario;
    console.log(novoUsuario);
  }
}

novo-usuario.html:

<h4 class="text-center">Registre-se e mostre seu pet ao mundo!</h4>

<form class="form mt-4" [formGroup]="novoUsuarioForm" (ngSubmit)="cadastrar()">
  <div class="form-group">
    <input placeholder="E-mail" class="form-control" formControlName="email" />
    <app-mensagem
      *ngIf="
        novoUsuarioForm.get('email')?.errors?.required &&
        novoUsuarioForm.get('email')?.touched
      "
      mensagem="E-mail obrigatório"
    ></app-mensagem>
    <app-mensagem
      *ngIf="
        novoUsuarioForm.get('email')?.errors?.email &&
        novoUsuarioForm.get('email')?.touched
      "
      mensagem="E-mail no formato incorreto!"
    ></app-mensagem>
  </div>
  <div class="form-group">
    <input
      placeholder="Nome Completo"
      class="form-control"
      formControlName="fullName"
    />
    <app-mensagem
      *ngIf="
        novoUsuarioForm.get('fullName')?.errors &&
        novoUsuarioForm.get('fullName')?.touched
      "
      mensagem="Nome necessário!"
    ></app-mensagem>
  </div>
  <div class="form-group">
    <input
      placeholder="Usúario"
      class="form-control"
      formControlName="userName"
    />
    <app-mensagem
      *ngIf="
        novoUsuarioForm.get('userName')?.errors?.minusculo &&
        novoUsuarioForm.get('userName')?.touched
      "
      mensagem="Usuário deve ser somente em letras minúsculas"
    >
    </app-mensagem>
    <app-mensagem
      *ngIf="novoUsuarioForm.get('userName')?.errors?.usuarioExistente"
      message="Usuário existente!"
    ></app-mensagem>
  </div>
  <div class="form-group">
    <input
      type="password"
      placeholder="Senha"
      class="form-control"
      formControlName="password"
    />
  </div>
  <button class="btn btn-primary btn-block">Cadastro</button>
</form>

<p>Já é um usuário? <a [routerLink]="['']">Faça Login</a></p>