ERROR TypeError: Cannot read property 'get' of undefined Na Validação Assincrona

Estou fazendo a validação assincrona como mostrado, porém, ao inserir qualquer caracter no campo, recebo no console ERROR TypeError: Cannot read property 'get' of undefined.

novo-usuario.component.html

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

<form class = "form mt-4" action="" [formGroup]= 'novoUsuarioForm' (submit)='cadastrar()'>
  <div class="form-group">
    <input class = 'form-control' type="text" placeholder="e-mail" 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 class = 'form-control' type="text" placeholder="Nome Completo" formControlName ='fullName'>
  </div>
  <div class="form-group">
    <input class= 'form-control' type="text" placeholder="Usuário" formControlName = 'userName'>
    <app-mensagem
    *ngIf="novoUsuarioForm.get('userName')?.errors?.minusculo && novoUsuarioForm.get('userName')?.touched"
    mensagem = "Usuário deve ser com letras minúsculas"
    ></app-mensagem>
    <app-mensagem
    *ngIf="novoUsuarioForm.get('userName')?.errors?.usuarioExistente"
    mensagem = " Usuário já cadastrado"
    ></app-mensagem>
  </div>
  <div class="form-group">
    <input class = 'form-control' type="password" placeholder="Senha" formControlName ='password'>
  </div>

  <button class="btn btn-primary">Cadastro</button>
</form>
<p>Já é um usuário? <a routerLink="['']">Faça Login</a></p>

novo-usuario.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { NovoUsuario } from './novo-usuario';
import { NovoUsuarioService } from './novo-usuario.service';
import { validaMinusculo } from './minusculo.validator';
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 {

  // o !: em novoUsuarioForm é para mostrar que o formulario pode ser nulo ou não.

  novoUsuarioForm!: FormGroup;

  constructor(private formBuilder: FormBuilder,
              private novoUsuarioService: NovoUsuarioService,
              private router: Router,
              private usuarioExisteService: UsuarioExisteService) { }

  ngOnInit(): void {

    this.novoUsuarioForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      fullName: ['', [Validators.required, Validators.minLength(4), Validators.pattern('[a-zA-Z ]*')]],
      userName: ['', [validaMinusculo], [this.usuarioExisteService.usuarioJaExiste()]],
      password: ['']
    });
  }

  cadastrar() {
    console.log(this.novoUsuarioForm.getRawValue() as NovoUsuario);
    console.log(this.novoUsuarioForm.get('email')?.value);
    alert('cadastro realizado com sucesso');
    this.router.navigate(['']);
  }
}

novo-usario.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class NovoUsuarioService {

  constructor(private http: HttpClient) { }

  cadastrarNovoUsuario( novoUsuario: NovoUsuario){
    return this.http.post('http://localhost:3000/user/signup', novoUsuario);
  }

  verificaUsuarioExistente(nomeUsuario: string){
    return this.http.get(`http://localhost:3000/user/exists/${nomeUsuario}`);

  }
}

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()
      );
    };
  }
}