I am making a rest API using spring to do crud operations. In my angular app, the delete HTTP client is not working, when I click the delete button the selected id is not deleted. I know my server is running and the controller code is correct.
This is Employee-list.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Employee } from '../employee' ;
import { EmployeeService } from '../employee.service';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
employees!: Employee[];
constructor(private employeeService : EmployeeService ,
private router : Router) { }
ngOnInit(): void {
this.fetchEmployees();
}
private fetchEmployees()
{
this.employeeService.getEmployeesList().subscribe(data => this.employees = data );
}
updateEmployee(id : number)
{
this.router.navigate(['update-employee' , id ]) ;
}
deleteEmployee(id : number)
{
this.employeeService.deleteEmployee(id).subscribe(data => {
this.fetchEmployees() ;
})
}
}
And this is services page - employee.service.ts
import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http' ;
import { Observable } from 'rxjs';
import { Employee } from './employee';
/** Injectable - means it will be used to provide services */
@Injectable({
providedIn: 'root'
})
export class EmployeeService {
private baseUrl = "http://localhost:8080/api/v1/employees" ;
constructor(private httpClient: HttpClient) { }
getEmployeesList() : Observable<Employee[]>
{
return this.httpClient.get<Employee[]>(`${this.baseUrl}`) ;
}
createEmployee(employee : Employee) : Observable<Object>{
return this.httpClient.post(`${this.baseUrl}` , employee) ;
}
getEmployeeById(id: number): Observable<Employee>{
return this.httpClient.get<Employee>(`${this.baseUrl}/${id}`);
}
updateEmployee(id: number, employee: Employee): Observable<Object>{
return this.httpClient.put(`${this.baseUrl}/${id}`, employee);
}
deleteEmployee(id:number ) : Observable<Object>{
return this.httpClient.delete(`${this.baseUrl}/${id}` ) ;
}}
And here is how the button is bound to the deleteEmployee() in employee-list.component.html
<button (click) = "deleteEmployee(employee.id)" class = "btn btn-danger" style="margin-left: 10px"> Delete</button>
Error is
Access to XMLHttpRequest at 'http://localhost:8080/api/v1/employees/1' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
zone.js:2863 DELETE http://localhost:8080/api/v1/employees/1 net::ERR_FAILED
But i have added cross origin works fine for get , post and put request .PLease help.
And this is EmployeeController
package net.javaguides.springboot.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import net.javaguides.springboot.repository.EmployeeRepository ;
import net.javaguides.springboot.exception.ResourceNotFoundException;
import net.javaguides.springboot.model.Employee ;
@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/api/v1/")
public class EmployeeController {
@Autowired
private EmployeeRepository employeeRepository ;
//get all employees
@GetMapping("/employees")
public List<Employee> getAllEmployees()
{
return employeeRepository.findAll() ;
}
//create employee api
@PostMapping("/employees")
public Employee createEmployee(@RequestBody Employee employee)
{
return employeeRepository.save(employee);
}
// get employee by id rest api
@GetMapping("/employees/{id}")
public ResponseEntity<Employee> getEmployeeById(@PathVariable Long id)
{
Employee employee = employeeRepository
.findById(id)
.orElseThrow(()-> new ResourceNotFoundException("Employee not exist with id : " + id));
return ResponseEntity.ok(employee) ;
}
//update employee rest api
@PutMapping("/employees/{id}")
public ResponseEntity<Employee> updateEmployee(@PathVariable Long id ,@RequestBody Employee empdetails)
{
Employee employee = employeeRepository
.findById(id)
.orElseThrow(()-> new ResourceNotFoundException("Employee not exist with id : " + id));
employee.setFirstName(empdetails.getFirstName());
employee.setLastName(empdetails.getLastName());
employee.setEmailId(empdetails.getEmailId());
Employee updatedEmployee =employeeRepository.save(employee);
return ResponseEntity.ok(updatedEmployee) ;
}
//delete employee rest api
@DeleteMapping("/employees/{id")
public ResponseEntity<Map<String, Boolean>> deleteEmployee(@PathVariable Long id ,@RequestBody Employee empdetails)
{
Employee employee = employeeRepository
.findById(id)
.orElseThrow(()-> new ResourceNotFoundException("Employee not exist with id : " + id));
employeeRepository.delete(employee);
Map<String, Boolean> response = new HashMap<>();
response.put("deleted", Boolean.TRUE);
return ResponseEntity.ok(response);
}
}
Help is appreciated . I am stuck on this part from yesterday .
