Angular : Http failure response for http://localhost:8082/employee/all: 0 Unknown Error

I'm trying to fetch a list of employees from a Spring Boot back-end using Angular's HttpClient module, but I'm getting the error "Http failure response for http://localhost:8082/employee/all: 0 Unknown Error." in my Angular app.

Here's my app.component.ts file:

export class AppComponent implements OnInit {
public employees: Employee[] | undefined;

constructor(private employeeService: EmployeeService) {}

ngOnInit(): void {
this.getEmployees();
}

public getEmployees(): void {
this.employeeService.getEmployees().subscribe(
(response: Employee[]) => {
this.employees = response;
},
(error: HttpErrorResponse) => {
alert(error.message);
}
)
}
}


And here's my employee.service.ts file:

@Injectable({
providedIn: 'root',
})
export class EmployeeService {
private apiServerUrl = environment.apiBaseUrl;

constructor(private http: HttpClient) {}

public getEmployees(): Observable<Employee[]> {
return this.http.get<Employee[]>(`${this.apiServerUrl}/employee/all`);
}

public addEmployee(employee: Employee): Observable<Employee> {
return this.http.post<Employee>(
`${this.apiServerUrl}/employee/add`,
employee
);
}

public updateEmployee(employee: Employee): Observable<Employee> {
return this.http.put<Employee>(
`${this.apiServerUrl}/employee/update`,
employee
);
}

public deleteEmployee(employeeId: number): Observable<void> {
return this.http.delete<void>(
`${this.apiServerUrl}/employee/delete/${employeeId}`
);
}
}


And here is the terminal output from the back-end:

GET http://localhost:8082/employee/all

HTTP/1.1 200 Content-Type: application/json Transfer-Encoding: chunked Date: Fri, 27 Jan 2023 16:00:06 GMT Keep-Alive: timeout=60 Connection: keep-alive

[ { "id": 5, "name": "Millard Gerhartz", "email": "mgerhartz0@so-net.ne.jp", "jobTitle": "Business Systems Development Analyst", "phone": "487-530-7589", "imageUrl": "https://img.freepik.com/free-photo/close-up-young-successful-man-smiling-camera-standing-casual-outfit-against-blue-background_1258-66609.jpg?w=2000", "employeeCode": "4d6ca12b-94fc-4d64-8ea3-d4c3e2cfdfc3" }, { "id": 6, "name": "Terencio Stoate", "email": "tstoate0@howstuffworks.com", "jobTitle": "Budget/Accounting Analyst II", "phone": "936-713-6713", "imageUrl": "http://dummyimage.com/147x100.png/cc0000/ffffff", "employeeCode": "a0154f0f-5e8e-4456-8cb6-93f693dbf462" } ]

Response code: 200; Time: 157ms; Content length: 610 bytes
​

It seems like employees list is always empty

Continue reading...