Why do I have 404 error (Angular 2 and Node js)

Question

I have a form on my site and I want to send the data from fields to my email. I am using nodemailer and node js for this things. But when I submit form I have an 404 error on POST request. form-component:

this.http.post('api/sendForm',{
    to: environment.contactUsEmail,
    from: 'zzz',
    subject: 'zzz',
    mailInfo: contactUsData,
}
).subscribe(() => {
    this.cooperationFormGroup.reset();
});

server.ts: (path:backend/server.ts) folder backend is near folder src

const express = require('express');

const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const PORT = process.env.PORT || 3000;

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.post('api/sendForm', (req, res) => {
        const payload = req.body;
        const mailInfo = payload.mailInfo;

        const transporter = nodemailer.createTransport({
            service: 'gmail',
            host: 'smtp.gmail.com',
            secure: 'true',
            port: '465',
            auth: {
                user: 'email', 
                pass: 'pass',
            }
        });

    const text = [...];
    
    const mailOptions = {
        from: 'zz',
        to: payload.to,
        subject: payload.subject,
        text: text.join('\n'),
    };

        transporter.sendMail(mailOptions, (error, info) => {
            if (error) {
                console.log(error);
            } else {
                console.log('Email sent: ' + info.response);
                res.status(200).json({
                    message: 'successfully sent!'
                })
            }
        });

    });


app.listen(PORT, () => {
    console.log(`Server is running in ${PORT}`);
});

I run server.ts in the folder backend using node server.ts and run angular app using npm start

Guess: try 'http://localhost:3000/api/sendForm' instead of 'api/sendForm'. — pzaenger
– pzaenger, Commented Jun 20, 2020 at 15:15
yes, you're right, but when I will build my app, how can I solve this problem?(I assume that localhost:3000/api will not work) — evrenior
– evrenior, Commented Jun 20, 2020 at 15:30
I think with nodejs you'd solve it with using environment variable — ihor.eth
– ihor.eth, Commented Jun 20, 2020 at 15:34

pzaenger · Accepted Answer · 2020-06-20 15:40:44Z

As mentioned above in my comment: you need to pass the complete URL of your backend to post: use http://localhost:3000/api/sendForm instead of api/sendForm.

However, to manage different values during development and production, you might want to use environment.ts and environment.prod.ts:

environments/environment.ts:

export const environment = {
  production: false,
  urlToBackend: 'http://localhost:3000'
}

environments/environment.prod.ts:

export const environment = {
  production: true,
  urlToBackend: 'http://<IP>:3000'
}

service.ts:

While building the production build with npm run build, environment.ts will be replaced by environment.prod.ts as mentioned in the angular.json (see the object fileReplacements).

import { environment } from '../../environments/environment';
...

@Injectable()
export class AppService {

  url = environment.urlToBackend;

  constructor(private http: HttpClient) {
  }

  foo() {
    return this.http.post(`${this.url}/api/sendForm`,{ ... });
  }
}

My code is not accurate and you need to arrange it for your needs. However, I hope, you get the idea.

Harish · Accepted Answer · 2020-06-20 15:26:09Z

0

You need to mention the complete backend server URL in the first argument of the .post.

Change 'api/sendForm' to 'Your complete backend url'.

this.http.post( 'complete backend server url' ,

since you are running the node server on PORT 3000. Your backend URL will be http://localhost:3000/api/sendForm

answered Jun 20, 2020 at 15:26

Harish

7345 silver badges11 bronze badges

Collectives™ on Stack Overflow

Why do I have 404 error (Angular 2 and Node js)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related