Angular HTTP Request returns error from server

I have a registration from in my angular project which sends the new user's details to the server and should get a response from it also, but instead it returns an error.

This is the registration service code:

const httpOptions = {
  headers: new HttpHeaders({
    "Content-Type": "application/json"
  })
};

@Injectable({
  providedIn: "root"
})
export class RegisterService {
  constructor(private http: HttpClient) {}

  addUser(user: registerForm): Observable<registerForm> {
    return this.http.post<registerForm>(
      `http://localhost:3000/users/register`,
      user,
      httpOptions
    );
  }
} 

Registration ts file:

export class RegisterPageComponent implements OnInit {
constructor(private rs: RegisterService, private registerForm: FormBuilder) {
    this.form = this.registerForm.group({
      email: "",
      password: "",
      fname: "",
      lname: "",
      city: "",
      adress: ""
    });
  }

  ngOnInit() {}
  getErrorMessage() {
    return this.email.hasError("required")
      ? "You must enter a value"
      : this.email.hasError("email")
      ? "Not a valid email"
      : "";
  }

  handSubmit(val) {
    console.log(val);
    this.rs.addUser(val).subscribe(data => {
      console.log(data);
    });
  }
}

and that's the error I get:

HttpErrorResponse {headers: HttpHeaders, status: 500, statusText: "Internal Server Error", url: "http://localhost:3000/users/register", ok: false, …}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
status: 500
statusText: "Internal Server Error"
url: "http://localhost:3000/users/register"
ok: false
name: "HttpErrorResponse"
message: "Http failure response for http://localhost:3000/users/register: 500 Internal Server Error"
error: "[email protected] is already taken by another user."
__proto__: HttpResponseBase

This is the error when status is 200:
HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:3000/users/register", ok: false, …}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
status: 200
statusText: "OK"
url: "http://localhost:3000/users/register"
ok: false
name: "HttpErrorResponse"
message: "Http failure during parsing for http://localhost:3000/users/register"
error: {error: SyntaxError: Unexpected token O in JSON at position 0 at JSON.parse (<anonymous>) at XML

Maybe I'm missing something? at past I used to send requests and get responses by Fetch, then and catch. I can't understand where can I control the response from the server at the client side...