How to send email from Angular .Netcore application with attachment?

So I got an MVC application where I’m trying to send email from Angular form running on DotNet server. The main problem that I see is when I call the service from my Angular component, it returns 404 (probably, URL not found).

Now, I have a message in my controller that should get printed, but it doesn’t which means my Angular is not able to talk with my backend Controller.

Here’s my Send-Email.component.ts submit function

submit() {
    if (this.EmailForm.valid) {
      this.eServ.sendEmail(this.EmailForm.getRawValue()).subscribe(result => {
        console.log("Email sent!");
      });
      this.ref.close(this.EmailForm.getRawValue())
    }
}

This is my email.service

export class EmailService {

  constructor(private http: HttpClient) { }

  headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');

  sendEmail(mailMessage: any) {
    return this.http.post('api/mail/sendmail', JSON.stringify(mailMessage), { headers: this.headers })
  }

}

Finally, here’s my controller:

[Route("api/mail/sendmail")]
    [ApiController]
    public class EmailController : ControllerBase
    {
        [HttpPost]
        public async Task<IActionResult> SendMail([FromBody] Email email)
        {
            Console.WriteLine("Sending email");
            var client = new System.Net.Mail.SmtpClient("smtp.example.com", 111);
            client.UseDefaultCredentials = false;
            client.EnableSsl = true;
            client.Credentials = new System.Net.NetworkCredential(emailid, password);
            var mailMessage = new System.Net.Mail.MailMessage();
            mailMessage.From = new System.Net.Mail.MailAddress(senderemail);
            mailMessage.To.Add(email.To);
            mailMessage.Body = email.Text;
            await client.SendMailAsync(mailMessage);
            return Ok();
        }
    }
}

Now, I can’t figure out why it can’t talk with the controller. Is there something I’m missing?

TIA!!

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Looks like the service needs to send an Email object rather than an “any”. In the component, use Object.Assign to create a new Email object.

Email.service

sendEmail(mailMessage: Email) {
    return this.http.post<Email>('api/email/sendmail', JSON.stringify(mailMessage), { headers: this.headers })
  }

Send-Email.Component

submit() {
    if (this.EmailForm.valid) {
   let dataToSend: Email = Object.assign(new Email(), this.EmailForm.getRawValue())// add this
// then the rest of the code
    }
}

Controller looks fine. Let me know if it works.

–Update–

In your controller, the route should be:

[Route("api/email/sendmail")]

because the name of your controller is Email not mail.

Method 2

You don’t have the domain part of the URL in your API call.

sendEmail(mailMessage: any) {
    return this.http.post('https://example.com/api/mail/sendmail', 
    JSON.stringify(mailMessage), { headers: this.headers })
  }

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating