Erro 404 validação assincrona

Estou acompanhando o curso na lição de validação de formulário. tenho o seguindo componente

  constructor(
        public formBuilder: FormBuilder,
        private cadUsuarioValidatorService: CadUsuarioValidatorService,
        private cadUsuarioService: CadUsuarioService,
        private router: Router
        ){
            this.cadUsuarioForm = this.formBuilder.group({
                fullName: new FormControl('', Validators.compose([
                    Validators.required,
                    Validators.minLength(5),
                    Validators.maxLength(140)
                ])),
                cpf: new FormControl('', Validators.compose([
                    Validators.required,
                    cpfValidator
                ]), 
                    this.cadUsuarioValidatorService.checkCPFTaken()
                ),
                email: new FormControl('', Validators.compose([
                    Validators.required,
                    Validators.email
                ]),
                    this.cadUsuarioValidatorService.checkEmailTaken()
                ),
                password: new FormControl('', Validators.compose([
                    Validators.required,
                    Validators.minLength(8),
                    Validators.maxLength(14)
                ])),
                confirmPassword: new FormControl('', Validators.compose([
                    Validators.required,
                    Validators.minLength(8),
                    Validators.maxLength(14)
                ]))
            },{
               validator: confirmPasswordValidator('password', 'confirmPassword')
            });
        }

Na validação de CPF que valida se o cpf já esta cadastrado, quando eu informo um cpf não cadastrado a api retorna 404 então o formulário deveria validar. No entanto ele da erro de pending e não habilita o botão de salvar. segue html usado

    <button [disabled]="cadUsuarioForm.invalid || cadUsuarioForm.pending"                                 
                                mat-raised-button color="primary" 
                                class="btn-block btn-lg m-t-20 m-b-20" 
                                type="submit">Gravar</button>  

aqui estão as funções de validação

 checkCPFTaken() {
     return (control: AbstractControl) => {     
        return control
            .valueChanges
            .pipe(debounceTime(300))
            .pipe(switchMap(cpf =>
                this.cadUsuarioService.checkCPFTaken(cpf)
            ))
            .pipe(map(isTaken => isTaken ? { cpfTaken: true } : null ))
            .pipe(first());
     }
    }
    checkEmailTaken() {
        return (control: AbstractControl) => {     
           return control
               .valueChanges
               .pipe(debounceTime(300))
               .pipe(switchMap(email =>
                    this.cadUsuarioService.checkEmailTaken(email)
               ))
               .pipe(map(isTaken => isTaken ? { emailTaken: true } : null ))
               .pipe(first());
        }
       }