What exactly is the error in my Validator class or the observable pipe that this error keeps occuring in my console?

Errors keep appearing on my console after a while. Can anyone please tell me is it because of the flaky API? I am a beginner in Angular

Async Validator Class:

import { AsyncValidator, FormControl } from '@angular/forms'
import { AuthService } from '../auth.service'
import { Injectable } from '@angular/core';
import { map, catchError } from 'rxjs/operators'
import { of } from 'rxjs';

@Injectable ({providedIn : 'root'})

export class UniqueUsername implements AsyncValidator{
    constructor(private authService: AuthService){}

    validate = (control: FormControl) => {
        const { value } = control;
       
        return this.authService.usernameAvailable(value).pipe(
            map(()=> {
                return null;
            }),

            catchError(err=> {
                if(err.error.username){
                    return of({ nonUniqueUsername: true })
                }
                else{
                    return of({ noConnection: true})
                }
            })
        );
    }

    
}

Service:

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

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

  constructor(private http: HttpClient) { }

  usernameAvailable(username: string){
    return this.http.post<any>(' https://api.angular-email.com/auth/username ', {
      username: username
    })
  }
}

The error that keeps appearing on my console:

The answer is actually in your stack trace. It looks like you're using a json pipe on the signup.component.html, but Angular is unaware of what it is. This is most likely caused by not importing the CommonModule in your AppModule:

import { CommonModule } from '@angular/common';


@NgModule({
    ...
    imports: [ CommonModule ]
    ...
})