Angular.subscribe 未显示错误/成功消息

Question

My angular frontend.subscribe is not console.log(errorMessage) or console.log(successMessage)... why?

I need to push my error strings from backend java to angular frontend. The backend is logging errors correctly (on console) and all functionalities are working in frontend too,

But angular is not displaying my registration/login validation error strings at all. I suspect angular error/success message is null in frontend

Inspect chrome gives error code 500 and I need to narrow down where my error is... HELP!

Backend (Java) showing correct error message:

n: CustomerService.EMAIL_ID_ALREADY_IN_USE
        at com.java.app2.service.CustomerServiceImpl.registerNewCustomer(CustomerServiceImpl.java:48) ~[classes/:na]
        at com.java.app2.service.CustomerServiceImpl$$FastClassBySpringCGLIB$$3b86d440.invoke(<generated>) ~[classes/:na]
        at org.springframework.cglib.proxy.MethodProxy.invoke(MethodProxy.java:218) ~[spring-core-5.3.13.jar:5.3.13]
        at org.springframework.aop.framework.CglibAopProxy$CglibMethodInvocation.invokeJoinpoint(CglibAopProxy.java:783) ~[spring-aop-5.3.13.jar:5.3.13]

chrome (inspect) showing pretty much nothing:

zone.js:2863 POST http://localhost:3333/EKart_Server/customer-api/customers 500
...
...
Show 37 more frames
registration.service.ts:25 HttpErrorResponse {headers: HttpHeaders, status: 500, statusText: 'OK', url: 'http://localhost:3333/EKart_Server/customer-api/customers', ok: false, …}
registration.component.ts:54 undefined

I think my error is here(component.ts):

    customer: Customer = new Customer
    registerUserForm!: FormGroup
    errorMessage: string = ''
    successMessage: string = ''
    constructor(private fb: FormBuilder, private registerService: RegistrationService) {}
    ngOnInit() {
        this.customer = new Customer()
        this.createForm()
    }
    registerUser() {
        this.errorMessage = ''
        this.successMessage = ''
        this.customer = this.registerUserForm.value as Customer

        this.registerService.registerCustomer(this.customer).subscribe(
            {
                next: message => {
                    this.successMessage = message
                    console.log(message)
                    console.log("meow meow")
                    this.registerUserForm.reset()

                },
                error: error => {
                    this.errorMessage = <any> error
                    console.log(error)
                }
            }
        )
    }

or maybe here(component.html)

<form [formGroup]="registerUserForm" (ngSubmit)="registerUser()">
...
validation stuff...
...
</form>
<h5 class="success-message">{{successMessage}}</h5>
<h5 class="error-message">{{errorMessage}}</h5>
<div class="text-info">Are you a registered user? <a routerLink="../login">Sign in</a></div>

Answer 1

If you send a String from your backend, then you need to tell to the httpClient the response type is going to be a text. By default it spects a json response. So either you return a json response from api, or do this on your service:

getData(){
  return this.httpClient.get('whateverUrl', {responseType: 'text'});
}