ERROR TypeError: Cannot read properties of undefined (reading 'pipe') | Angular

Executei o projeto e me deparei com o seguinte erros:

ERROR TypeError: Cannot read properties of undefined (reading 'pipe')
ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

Acredito que tenha algum erro no código a baixo, pois quando eu removo: [this.usuarioExistenteService.usuarioJaExiste()] do novo-usuario.componente.ts o código funciona normalmente:

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

Eu já revisei e comparei varias vezes o código do professor com o meu porem ainda não consegui a solução.

Oi Julio, tudo bem?

Desculpe a demora em retornar.

O erro tá acontecendo porque você tá tentando acessar a propriedade 'pipe' de uma instância de AbstractControl que não está definida. Isso geralmente acontece quando há problemas de sincronização entre o template e o componente, por exemplo, o template é carregado antes que o componente seja criado.

Uma possível solução seria verificar se o serviço this.usuarioExistenteService está definido antes de acessar sua propriedade usuarioJaExiste(). Algo assim:

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) => {
      if (this._novoUsuarioService) {
        return control.valueChanges.pipe(
          switchMap(
            (nomeUsuario) => this._novoUsuarioService.verificaUsuarioExistente(nomeUsuario)
          ),
          map((usuarioExiste) =>
            usuarioExiste ? { usuarioExistente: true } : null
          ),
          first()
        );
      }
      return null;
    };
  }
}

No código acima, primeiro verificamos se _novoUsuarioService existe antes de acessá-lo em usuarioJaExiste(). Se ele não existir, retornamos null em vez de continuar com o processamento do observable.

E, o segundo erro que você mencionou ("formGroup expects a FormGroup instance. Please pass one in.") geralmente ocorre quando você passa um objeto inválido para o FormGroup. Isso pode acontecer se você esquecer de importar o ReactiveFormsModule ou se estiver passando um objeto que não seja um FormGroup.

Veja se você tá importando o módulo ReactiveFormsModule em seu módulo raiz (app.module.ts) e certifique-se de que o objeto que você está passando para o FormGroup é de fato um FormGroup. Por exemplo, o FormGroup pode ser criado assim:

import { FormGroup, FormControl } from '@angular/forms';

const formGroup = new FormGroup({
  nome: new FormControl(),
  email: new FormControl(),
  senha: new FormControl()
});

Espero que tenha te ajudado.

Um abraço e bons estudos.

Mergulhe em programação