How can I support PUT method in my Spring Boot app? - spring

Question

I'm using Angular CLI and Spring Boot.
Everything works (getEmployee, deleteEmployee) but when I want to Update or Create (same method, and same HTML Form) an Employee I get in HTML Console/Network this error:
[ERROR] message: "Request method 'PUT' not supported"
This is my Controller:
#RestController
#RequestMapping("/api")
public class EmployeeController {
private final EmployeeServiceImpl employeeService;
#Autowired
public EmployeeController(EmployeeServiceImpl employeeService) {
this.employeeService = employeeService;
}
#GetMapping("/employees")
public List<Employee> getAllEmployees() {
return employeeService.findAllEmployees();
}
#GetMapping("/employees/{id}")
public ResponseEntity<Employee> getEmployeeById(#PathVariable(value = "id") Long employeeId) {
Employee employee = employeeService.findById(employeeId).get();
return ResponseEntity.ok().body(employee);
}
#PutMapping("/employees/{id}")
public ResponseEntity<Employee> updateEmployee(#PathVariable(value = "id") Long employeeId,
#Valid #RequestBody Employee employeeDetails) {
Employee employee = employeeService.findById(employeeId).get();
employee.setEmailAddress(employeeDetails.getEmailAddress());
employee.setLastName(employeeDetails.getLastName());
employee.setFirstName(employeeDetails.getFirstName());
employee.setStatus(employeeDetails.getStatus());
employee.setSkills(employeeDetails.getSkills());
final Employee updatedEmployee = employeeService.saveEmployee(employee);
return ResponseEntity.ok(updatedEmployee);
}
#DeleteMapping("/employees/{id}")
public Map<String, Boolean> deleteEmployee(#PathVariable(value = "id") Long employeeId) {
Employee employee = employeeService.findById(employeeId).get();
employeeService.deleteEmployee(employee);
Map<String, Boolean> response = new HashMap<>();
response.put("deleted", Boolean.TRUE);
return response;
}
}//close class
This is also my CORSConfig:
#Configuration
public class CORSConfiguration implements WebMvcConfigurer {
#Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedHeaders("*")
.allowedMethods("GET", "POST", "DELETE","PUT");
}
}//close class
Here you can see my Angular code:
EmployeeDetail.ts
export class EmployeeDetailsComponent implements OnInit {
#Input()
employee: Employee;
skills;
constructor(
private route: ActivatedRoute, /* holds information about the route to this instance of the EmployeeDetailsComponent */
private location: Location,
private employeeService: EmployeeService,
private skillService: SkillService
) {
}
ngOnInit() {
this.getEmployee();
this.skillService.getSkills().subscribe(res => this.skills = res);
}
getEmployee(): void {
const id = +this.route.snapshot.paramMap.get('id');
if (id === -1) {
this.employee = new Employee();
} else {
this.employeeService.getEmployee(id)
.subscribe(employee => this.employee = employee);
}
}
save(): void {
this.employeeService.updateEmployee(this.employee)
.subscribe(() => this.goBack());
console.log('test', this.employee);
}
goBack(): void {
this.location.back();
}
}
When I click on save the method redirect me to the Update method in my service;
service.ts
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
};
#Injectable({
providedIn: 'root'
})
export class EmployeeService {
private baseUrl = 'http://localhost:8080/api/employees';
constructor(private http: HttpClient) { }
/** GET Employees from the server */
getEmployees(): Observable<Employee[]> {
return this.http.get<Employee[]>(this.baseUrl);
}
getEmployee(id: number): Observable<Employee> {
const url = this.baseUrl + '/' + id;
return this.http.get<Employee>(url);
}
/** PUT: update the employee on the server */
updateEmployee(employee: Employee): Observable<any> {
return this.http.put(this.baseUrl, employee, httpOptions);
}
deleteEmployee(id: number): Observable<any> {
return this.http.delete(`${this.baseUrl}/${id}`, { responseType: 'text' });
}
}
This is my first SpringBoot app, also w/Angular so I never seen this error before.
What can I do?

Answer 1

Your Angular code shows the following method
updateEmployee(employee: Employee): Observable<any> {
return this.http.put(this.baseUrl, employee, httpOptions);
}
You did not include id in angular side. But for your spring boot side requires id. Since you are not passing the id the framework cannot find matching method resulting in 405 method not allowed error
#PutMapping("/employees/{id}")
public ResponseEntity<Employee> updateEmployee(#PathVariable(value = "id") Long employeeId,
#Valid #RequestBody Employee employeeDetails) {
Employee employee = employeeService.findById(employeeId).get();
employee.setEmailAddress(employeeDetails.getEmailAddress());
employee.setLastName(employeeDetails.getLastName());
employee.setFirstName(employeeDetails.getFirstName());
employee.setStatus(employeeDetails.getStatus());
employee.setSkills(employeeDetails.getSkills());
final Employee updatedEmployee = employeeService.saveEmployee(employee);
return ResponseEntity.ok(updatedEmployee);
}