title: Send email using nodemailer angular 6
body: <p>I have a <code>bootstrap</code> form for email services for <code>angular 6</code> app and <code>nodejs</code>, I am using <code>nodemailer</code> for sendemail in my app, unfortunately does not work. I am getting the following error when I submit the form: </p>
  
  <p><code>OPTIONS https://localhost:3000/contact/send 0 ()</code></p>
  
  <p>here is the form </p>
  
  <pre><code> &lt;form [formGroup]="angForm" novalidate&gt;
      &lt;div class="message"&gt;
        &lt;h3&gt; Write to us &lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="form__top"&gt;
        &lt;div class="form__left"&gt;
          &lt;div class="form__group"&gt;
            &lt;input class="form__input form__input--name" type="text"   formControlName="name" placeholder="name" #name&gt;
          &lt;/div&gt;
          &lt;div *ngIf="angForm.controls['name'].invalid &amp;&amp; (angForm.controls['name'].dirty || angForm.controls['name'].touched)" class="alert alert-danger"&gt;
            &lt;div *ngIf="angForm.controls['name'].errors.required"&gt;
              Name is required.
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form__group"&gt;
            &lt;input class="form__input form__input--email" type="email"  formControlName="email" placeholder="email" #email&gt;
          &lt;/div&gt;
          &lt;div *ngIf="angForm.controls['email'].invalid &amp;&amp; (angForm.controls['message'].dirty || angForm.controls['message'].touched)"
            class="alert alert-danger"&gt;
            &lt;div *ngIf="angForm.controls['message'].errors.required"&gt;
              message is required.
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form__right"&gt;
          &lt;div class="form__group"&gt;
            &lt;textarea class="form__input form__input--textarea" placeholder="Message" formControlName="message"  #message
              rows="3"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;div *ngIf="angForm.controls['message'].invalid &amp;&amp; (angForm.controls['message'].dirty || angForm.controls['message'].touched)"
            class="alert alert-danger"&gt;
            &lt;div *ngIf="angForm.controls['message'].errors.required"&gt;
              message is required.
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;flash-messages&gt;&lt;/flash-messages&gt;
      &lt;div class="form__down"&gt;
        &lt;div class="form__group"&gt;
          &lt;button (click)="sendMail(name.value, email.value, message.value)" [disabled]="angForm.pristine || angForm.invalid"  class="form__input form__input--submit" name="submit" type="submit" value="SEND MESSAGE"&gt;SEND MESSAGE
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/form&gt;
  </code></pre>
  
  <p>Here is contact,js (node mailer settings and routes)</p>
  
  <pre><code>  const express = require('express');
  const router = express.Router();
  const request = require('request');
  const nodemailer = require('nodemailer');
  const cors = require('cors');
  
  router.options('/send', cors()); 
  router.get('/send', cors(), (req, res) =&gt; {
      const outputData = `
      &lt;p&gt;You have a new contact request&lt;/p&gt;
      &lt;h3&gt;Contact Details&lt;/h3&gt;
      &lt;ul&gt;  
        &lt;li&gt;Name: ${req.body.name}&lt;/li&gt;
        &lt;li&gt;Email: ${req.body.email}&lt;/li&gt;
      &lt;/ul&gt;
      &lt;h3&gt;Message&lt;/h3&gt;
      &lt;p&gt;${req.body.message}&lt;/p&gt;
    `;
  
      let transporter = nodemailer.createTransport({
          host: 'smtp.gmail.com',
          port: 465,
          secure: false,
          port: 25,
          auth: {
              user: 'email',
              pass: 'pass'
          },
          tls: {
              rejectUnauthorized: false
          }
      });
  
      let HelperOptions = {
          from: '"kutomba" &lt;email',
          to: 'email',
          subject: 'Majeni Contact Request',
          text: 'Hello',
          html: outputData
      };
  
  
  
      transporter.sendMail(HelperOptions, (error, info) =&gt; {
          if (error) {
              return console.log(error);
          }
          console.log("The message was sent!");
          console.log(info);
      });
  
  });
  module.exports = router;
  </code></pre>
  
  <p>here is the server js.
  <strong>UPDATE</strong> </p>
  
  <pre><code>// server.js
  const express = require('express');
  const bodyParser = require('body-parser');
  const cors = require('cors');
  const path = require('path');
  const app = express();
  // CORS Middleware
  app.use(cors());
  // Port Number
  const port = process.env.PORT || 3000
  // Run the app by serving the static files
  // in the dist directory
  app.use(express.static(path.join(__dirname, '/majeni/dist/majeni')));
  // Body Parser Middleware
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use(bodyParser.json());
  //routes
  const contact = require('./app/routes/contact');
  app.use('/contact', contact);
  // If an incoming request uses
  // a protocol other than HTTPS,
  // redirect that request to the
  // same url but with HTTPS
  const forceSSL = function () {
    return function (req, res, next) {
      if (req.headers['x-forwarded-proto'] !== 'https') {
        return res.redirect(
          ['https://', req.get('Host'), req.url].join('')
        );
      }
      next();
    }
  }
  
  // Instruct the app
  // to use the forceSSL
  // middleware
  app.use(forceSSL());
  app.use(function (req, res, next) {
  
    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  
    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  
    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  
    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);
  
    // Pass to next layer of middleware
    if ('OPTIONS' == req.method) {
      res.sendStatus(200);
      } else {
        next();
      }
  
  });
  
  // For all GET requests, send back index.html
  // so that PathLocationStrategy can be used
  app.get('/*', function (req, res) {
    res.sendFile(path.join(__dirname + '/majeni/dist/majeni/index.html'));
  });
  
  // Start Server
  app.listen(port, () =&gt; {
      console.log('Server started on port '+port);
    });
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Here is service </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Headers, Http, Response } from '@angular/http';
  import { Jsonp } from '@angular/http';
  @Injectable({
    providedIn: 'root'
  })
  export class ContactService {
  
    constructor(private http: Http) { }
  
    sendEmail(name, email, message) {
      const uri = 'http://localhost:3000/contact/send';
      const obj = {
        name: name,
        email: email,
        message: message,
      };
      return this.http.post(uri, obj);
    }
  }
  </code></pre>
  
  <p><strong>UPDATE : component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ContactService } from '../../contact.service';
  import { FormGroup, FormBuilder, Validators } from '@angular/forms';
  import { FlashMessagesModule, FlashMessagesService } from 'angular2-flash-messages';
  @Component({
    selector: 'app-footer',
    templateUrl: './footer.component.html',
    styleUrls: ['./footer.component.scss']
  })
  export class FooterComponent implements OnInit {
    angForm: FormGroup;
    constructor(
      private flashMessages: FlashMessagesService,
      private fb: FormBuilder,
      private contactService: ContactService) {
      this.createForm();
    }
  
    createForm() {
      this.angForm = this.fb.group({
        name: ['', Validators.required],
        email: ['', Validators.required],
        message: ['', Validators.required],
      });
    }
    sendMail(name, email, message) {
      this.contactService.sendEmail(name, email, message).subscribe(success =&gt; {
        this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
        console.log(success);
      }, error =&gt; {
        this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
      });
    }
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>What is  missing in my code? </p>