Sending emails with Angular 7 + SpringBoot

Question

I am able to send emails with SpringBoot and hardcoded data.

Now the problem is to get the data from my Angular form, and call the API with the data from there, but I'm getting error 500.

Can someone know where is the problem?

EmailService.java

@Service
public class EmailService {

    private JavaMailSender javaMailSender;

    @Autowired
    public EmailService(JavaMailSender javaMailSender){
        this.javaMailSender = javaMailSender;
    }

    public void sendEmail(Email email) throws MailException {
        SimpleMailMessage mail = new SimpleMailMessage();
        mail.setTo("marioluarca7@gmail.com");
        mail.setFrom(email.getEmail());
        mail.setSubject("Contacto: "+email.getNombre());
        mail.setText(email.getMensaje());

        javaMailSender.send(mail);
    }

}

CustomerController.java

@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/api")
public class CustomerController {



  @Autowired
  private EmailService emailService;

 //some other code

  @PostMapping(value = "/email")
  public ResponseEntity<Email> enviarEmail( Email email){
    try {
      emailService.sendEmail(email);
      return new ResponseEntity<>(email,  HttpStatus.OK);
    } catch( MailException e){
      return new ResponseEntity<>(null, HttpStatus.INTERNAL_SERVER_ERROR);
    }


  }

}

contacto.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Email } from 'src/app/models/email';
import { EmailService } from 'src/app/services/email.service';
import { NgForm } from '@angular/forms';


@Component({
  selector: 'app-contacto',
  templateUrl: './contacto.component.html',
  styleUrls: ['./contacto.component.css']
})
export class ContactoComponent implements OnInit {

  ngOnInit() {
  }

  mail :Email = new Email();

  constructor(private http: HttpClient, private emailService :EmailService) { }

  private enviarEmail() {
    this.emailService.enviarEmail(this.mail)
      .subscribe(data => console.log(data));
  }

  private onSubmit() {
    this.enviarEmail();
  }


}

contacto.component.html

<form (ngSubmit)="onSubmit()" #contacto>
              <div class="form-group">
                <label for="nombre">Nombre</label>
                <input type="text" class="form-control" id="name" required [(ngModel)]="mail.nombre" name="nombre">
              </div>

              <div class="form-group">
                <label for="email">Email</label>
                <input type="text" class="form-control" id="email" required [(ngModel)]="mail.email" name="email">
              </div>

              <div class="form-group">
                <label for="mensaje">Mensaje</label>
                <input type="text" class="form-control" id="mensaje" required [(ngModel)]="mail.mensaje" name="mensaje">
              </div>

              <button type="submit" class="btn btn-success">Contactar</button>
            </form>

email.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Email } from '../models/email';

@Injectable({
  providedIn: 'root'
})
export class EmailService {

  constructor(private http :HttpClient) { }

  private baseUrl = 'http://localhost:8080/api/email';

  enviarEmail(email :Email): Observable<any> {
    return this.http.post(`${this.baseUrl}`, email);
  }

}

Answer 1

The problem was at the method enviarEmail() in CustomerController.java.

The object "Email" the method was receiving was missing the @RequestBody annotation. Working well now!

Answer 2

I am with a problem similar. But I if have the annotation @RequestBody in the controller. I've difference with your code but know that is the same idea.