localhost:4567 url gets redirected to port 80

Question

I'm using nodejs, Express and angular 6 for my website, and I've just created a contact form with nodemailer. Now I want to use a flash message to show on the contact page after the form is submitted eg

Data succesfully submitted ! Thanks' and vice versa

here is form

<h1>Contact us</h1>
 <flash-messages></flash-messages>

  <form [formGroup]="angForm" method="POST" novalidate>
    <div class="message">
      <h3> Write to us </h3>
    </div>
    <div class="form__top">
      <div class="form__left">
        <div class="form__group">
          <input class="form__input form__input--name" type="text"   formControlName="name" placeholder="name" #name>
        </div>
        <div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touched)" class="alert alert-danger">
          <div *ngIf="angForm.controls['name'].errors.required">
            Name is required.
          </div>
        </div>
        <div class="form__group">
          <input class="form__input form__input--email" type="email"  formControlName="email" placeholder="email" #email>
        </div>
        <div *ngIf="angForm.controls['email'].invalid && (angForm.controls['message'].dirty || angForm.controls['message'].touched)"
          class="alert alert-danger">
          <div *ngIf="angForm.controls['message'].errors.required">
            message is required.
          </div>
        </div>
      </div>
      <div class="form__right">
        <div class="form__group">
          <textarea class="form__input form__input--textarea" placeholder="Message" formControlName="message"  #message
            rows="3"></textarea>
        </div>
        <div *ngIf="angForm.controls['message'].invalid && (angForm.controls['message'].dirty || angForm.controls['message'].touched)"
          class="alert alert-danger">
          <div *ngIf="angForm.controls['message'].errors.required">
            message is required.
          </div>
        </div>
      </div>
    </div>

    <div class="form__down">
      <div class="form__group">
        <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">SEND MESSAGE
        </button>
      </div>
    </div>
  </form>

here is components.ts

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(() => {
      this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
    }, error => {
      this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
    });
  }
  ngOnInit() {
  }

}

here is contact.js(node mailer settings)

const express = require('express');
const router = express.Router();
const request = require('request');
const nodemailer = require('nodemailer');

router.post('/send', (req, res) => {
    const outputData = `
    <p>You have a new contact request</p>
    <h3>Contact Details</h3>
    <ul>  
      <li>Name: ${req.body.name}</li>
      <li>Email: ${req.body.email}</li>
    </ul>
    <h3>Message</h3>
    <p>${req.body.message}</p>
  `;

    let transporter = nodemailer.createTransport({
       service: 'gmail',
        auth: {
            user: 'myEmail',
            pass: 'pass'
        },
        tls: {
            rejectUnauthorized: false
        }
    });

    let HelperOptions = {
        from: '"name" <myEmail',
        to: 'myEmail',
        subject: 'Majeni Contact Request',
        text: 'Hello',
        html: outputData
    };



    transporter.sendMail(HelperOptions, (error, info) => {
        if (error) {
            return console.log(error);
        }
        console.log("The message was sent!");
        console.log(info);
    });

});
module.exports = router;

Now I am able to send the message, but I want the successfully message to display when data is submitted. unfortunatelly nothing is displayed but the data is submitted.

what am I doing wrong here?

Solution

In the end it was the cache of the browser playing tricks on me. I have marked this question to be deleted by mods, as it has nothing to do with Ubuntu.

Sorry!

Comments

[Zuko]

Have you tried to check for which process might be using that port..? try sudo netstat -tapen | grep ":80"

[Zuko]

I actually wanted you to substitute the port 80 with 4567 or better yet use curl to check out that url from host as in curl -v localhost:4567. it might give you more information

[Enrique Moreno Tent]

curl output: pastebin.com/XdYqxkv3

[Zuko]

If you ask me, it looks like apache is running. try disabling it and run that url in your browser or curl it again. sudo service apache2 stop