How to fix backend POST message giving HTTP failure response for http://localhost:4200/send: 404

Question

Trying to submit the form request will fail due to an HTTP response error 404.

I've already tried changing the port to 3000, and url to http:localhost:3000/send it still gave the same error

HTML form: app.component.html

form class="text-center border border-light p-5" [formGroup]="contactForm" (ngSubmit)="onSubmit()">

  <p class="h4 mb-4">Contact us</p>

  <!-- Name -->
  <input type="text" formControlName="contactFormName" id="defaultContactFormName" mdbInput
    class="form-control mb-4" placeholder="Name">

  <!-- Email -->
  <input type="email" formControlName="contactFormEmail" id="defaultContactFormEmail" mdbInput
    class="form-control mb-4" placeholder="E-mail">

  <!-- Subject -->
  <label>Subject</label>
  <select formControlName="contactFormSubjects" class="browser-default custom-select mb-4">
    <option value="" disabled>Choose option</option>
    <option value="1" selected>Feedback</option>
    <option value="2">Report a bug</option>
    <option value="3">Feature request</option>
    <option value="4">Feature request</option>
  </select>

  <!-- Message -->
  <div class="form-group">
    <textarea formControlName="contactFormMessage" class="form-control rounded-0" mdbInput id="exampleFormControlTextarea2"
      rows="3" placeholder="Message"></textarea>
  </div>

  <!-- Copy -->
  <mdb-checkbox [default]="true" class="mb-4">Send me a copy of this message</mdb-checkbox>

  <!-- Send button -->
  <button mdbBtn color="info" outline="true" block="true" class="z-depth-0 my-4 waves-effect"
    mdbWavesEffect type="submit" [disabled]="disabledSubmitButton">Send</button>

</form>

connection.service.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class ConnectionService {
url = 'http://localhost:4200/send';
constructor(private http: HttpClient) { }

sendMessage(messageContent: any) {
  return this.http.post(this.url,
  JSON.stringify(messageContent),
  { headers: new HttpHeaders({ 'Content-Type': 'application/json' }), responseType: 'text' });
}
}

server.js

const express = require('express');
const nodemailer = require('nodemailer');
const app = express();
const port = 4200;
const bodyParser = require('body-parser');

const transporter = nodemailer.createTransport({

  host: 'smtp.gmail.com',
  provider: 'gmail',
  port: 465,
  secure: true,
  auth: {
    user: '**********', // Enter here email address from which you want to send emails
    pass: '**********' // Enter here password for email account from which you want to send emails
  },
  tls: {
  rejectUnauthorized: false
  }
});

app.use(bodyParser.json());

app.use(function (req, res, next) {

  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.post('/send', function (req, res) {

  let senderName = req.body.contactFormName;
  let senderEmail = req.body.contactFormEmail;
  let messageSubject = req.body.contactFormSubjects;
  let messageText = req.body.contactFormMessage;
  let copyToSender = req.body.contactFormCopy;

  let mailOptions = {
    to: [' '], // Enter here the email address on which you want to send emails from your customers
    from: senderName,
    subject: messageSubject,
    text: messageText,
    replyTo: senderEmail
  };

  if (senderName === '') {
    res.status(400);
    res.send({
    message: 'Bad request'
    });
    return;
  }

  if (senderEmail === '') {
    res.status(400);
    res.send({
    message: 'Bad request'
    });
    return;
  }

  if (messageSubject === '') {
    res.status(400);
    res.send({
    message: 'Bad request'
    });
    return;
  }

  if (messageText === '') {
    res.status(400);
    res.send({
    message: 'Bad request'
    });
    return;
  }

  if (copyToSender) {
    mailOptions.to.push(senderEmail);
  }

  transporter.sendMail(mailOptions, function (error, response) {
    if (error) {
      console.log(error);
      res.end('error');
    } else {
      console.log('Message sent: ', response);
      res.end('sent');
    }
  });
});

app.listen(port, function () {
  console.log('Express started on port: ', port);
});

I expect the submit button to send an email from a defined email address

Answer 1

This is a little late, I was running into this problem while I was attempting to follow this tutorial as well. The issue was that I had simply not yet run the server.js file.

First keep the port numbers the same (I used the same number the tutorial used "300") in your "connection.service.ts" and "server.js" files.

Then, to run node create a new terminal in your project and type node server.js