Send email with Angular and NodeMailer

Question

how is it going?

I am trying to figure out how to send an email with Angular 5 and Node.js -using nodemailer-.

What I want to archive is when some user make an appointment in the page and system gets the provided email and send some information to the user when they click the button "Schedule my ....."

As you'll see in appointment.component.ts, when the user click the button a variable change to "true" to display some hidden div to the user and displays as well a snackbar but nothing happens. No error in the console log nor anything. Any ideas?

Here is my code below. Thanks in advance.

server.js

const express    = require('express');
const path       = require('path');
const http       = require('http');
const bodyParser = require('body-parser');
const nodeMailer = require('nodemailer');

const api = require('./server/routes/api');

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'dist')));

app.use('/api', api);
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});
app.post('/sendemail', (req, res) => {
  let transporter = nodeMailer.createTransport({
    host: 'smtp.gmail.com',
    port: 465,
    secure: true,
    auth: {
      user: 'xxxxx@gmail.com',
      pass: 'xxxxxxxxxxxxx'
    }
  });
  let mailOptions = {
    from: '"Nourish Team" <no-reply@nourish.io>',
    to: "anyemailhere@gmail.com",
    subject: 'Test',
    text: 'Hello!',
    html: '<b>Testing email function</b>'
  };

  transporter.sendMail(mailOptions, (error, info) => {
    if(error) {
      return console.log(error);
    }
    console.log('Message sent');
  })
});

const port = process.env.PORT || '3000';
app.set('port', port);

const server = http.createServer(app);
server.listen(port, () => console.log(`API running on localhost:${port}`));

appointment.component.html

<form novalidate action="/send-email" method="POST" (ngSubmit)="sendEmail()">
      <mat-form-field class="middle-width" ngClass.xs="full-width">
        <input matInput placeholder="Nombre Completo" [formControl]="fullName" required>
        <mat-error *ngIf="fullName.hasError('pattern') && !fullName.hasError('required')">
          El campo solo acepta letras.
        </mat-error>
        <mat-error *ngIf="fullName.hasError('required')">
          ¡Este cambo es <strong>requerido</strong>!
        </mat-error>
      </mat-form-field>
      <mat-form-field class="middle-width" ngClass.xs="full-width">
        <input matInput placeholder="Correo Electrónico" type="email" [formControl]="cEmail" required>
        <mat-error *ngIf="cEmail.hasError('email') && !cEmail.hasError('required')">
          Debes introducir un correo electrónico válido
        </mat-error>
        <mat-error *ngIf="cEmail.hasError('required')">
          ¡Este cambo es <strong>requerido</strong>!
        </mat-error>
      </mat-form-field>
      <mat-form-field class="middle-width" ngClass.xs="full-width">
        <input matInput placeholder="Teléfono" type="tel" [formControl]="phone" maxlength="14" mask="(000) 000 0000" required>
        <mat-hint align="end">{{phone.value.length}} / 10</mat-hint>
        <mat-error *ngIf="phone.hasError('pattern') && !phone.hasError('required')">
          El campo sólo acepta números
        </mat-error>
        <mat-error *ngIf="phone.hasError('required')">
          ¡Este cambo es <strong>requerido</strong>!
        </mat-error>
      </mat-form-field>
      <mat-form-field class="middle-width" ngClass.xs="full-width">
        <input matInput [matDatepicker]="picker" placeholder="Elegir fecha">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker touchUi="true" #picker></mat-datepicker>
      </mat-form-field>
      <br>
      <button mat-raised-button type="submit">Schedule My Appointment</button>
    </form>

appointment.component.ts

sendEmail() {
  this.sucess = true;
  this.snackBar.open('Información enviada exitosamente.', 'x', {
    duration: 5000,
  });
  this.name = this.fullName.value;  
    this.http.post('/sendemail', this.cEmail).subscribe(data => {
    console.log(data);
  });
}

I assume this code is to concatenated the node.js code into Angular5 app: this.http.post('/sendemail', this.cEmail).subscribe(data => {console.log(data);});

Answer 1

Thanks for your code! Mine worked. Maybe you want change your app.post method.

server.js

app.post("/sendemail", (req, res) => {
var transporter = nodemailer.createTransport({
    host: "smtp-mail.outlook.com",
    secureConnection: false,
    port: 587,
    tls: {
        chipers: "SSLv3"
    },
    auth: {
        user: "xxx@hotmail.com",
        pass: "xxx"
    }
});

var mailOptions = {
    from: "xxx@hotmail.com",
    to: "xxx@gmail.com",
    subject: "Nodejs Mail",
    text: "this is the email's body text..."
};

transporter.sendMail(mailOptions, function(error, info) {
    if (error) console.log(error);
    else console.log("Message sent successfully: " + info.response);
});

});