ERROR in src/app/home/signup/user-not-taken.validator.service.ts(19,21): error TS2322: Type 'void' is not assignable to type 'ObservableInput<any>'.

Apenas para deixar mais claro, o código agora está compilando após arrumar o retorno no signup.service.

É possível realizar a validação inclusive, como demonstrado na aula.

Porém no VSCODE o código abaixo continua emitindo o erro:

Type 'void' is not assignable to type 'ObservableInput'.ts(2322) switchMap.d.ts(2, 79): The expected type comes from the return type of this signature.

Não sei onde/como arrumar, mas gostaria de saber o que pode ser feito.

.pipe(switchMap(userName => 
                    this.signUpService.checkUserNameTaken(userName)
                ))

Fala aí Ricardo, tudo bem? O erro para ser porque sua função checkUserNameTaken não está retornando nada, ou seja, o retorno é vazio (void).

Ela precisa retornar um ObservableInput.

Como está o código da checkUserNameTaken?

Se quiser, compartilha o projeto completo com a gente através do Github ou Google Drive (zipado), ai ficaria mais fácil a gente te dar uma certeza do que está acontecendo.

Espero ter ajudado.

Valeu Matheus.

O código está exatamente como o disponível para download no capítulo seguinte, pois fui conferir.

O código acaba compilando e executando, porém sei que existe problema pois o VSCODE exibe a mensagem. Tentei tipar em alguns lugares mas não consegui resolver, pois tenho pouca experiencia com Typescript. Meus códigos são: SignUpService:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';


const API_URL = "http://localhost:3000";

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

    constructor(private http: HttpClient) {}

    checkUserNameTaken(userName: string) {
        return this.http.get(API_URL + '/user/exists/' + userName);
    }
}

UserNotTakenValidatorService:

import { Injectable } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { debounceTime, switchMap, map, first } from 'rxjs/operators';

import { SignUpService } from './signup.service';

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

    constructor(private signUpService: SignUpService) {}

    checkUserNameTaken() {
        return (control: AbstractControl) => {

            return control
                .valueChanges
                .pipe(debounceTime(300))
                .pipe(switchMap(userName => 
                    this.signUpService.checkUserNameTaken(userName)
                ))
                .pipe(map(isTaken => isTaken ? { userNameTaken: true } : null))
                .pipe(first());
        } 
    }
}

Numa aula anterior tive problemas com um código pois um dos componentes usados mudado a maneira de acionar o método.

Seria possível implementar uma solução onde o serviço retornasse um outro valor que não nulo? Acho que evitaria este problema.

Segue o repositório https://github.com/ricardoub/estudos-angular-alura-alurapic-app

Fala ai Ricardo, muito estranho ter dado esse problema no seu código, acho que seu vscode deve ter dado uma bugada, não sei.

Eu testei aqui e o mesmo não deu erro nenhum, seja no vscode ou funcionando no browser.

As vezes o vscode da umas pertida mesmo, precisa ver se tem muita extensão instalada nele e tals.

Nesse casos, sugiro você fechar ela e abrir novamente, talvez resolva.

Espero ter ajudado.