[英]How to POST from angular 2 to express server
Newbie here trying to get a grasp on sending contact form data from Angular 2 to a Node/Express server... Right now I'm hosting Angular 2 with the built-in server at localhost:4200, and the express server at localhost:3000. 这里的新手试图掌握将联系表单数据从Angular 2发送到Node / Express服务器的权限...现在,我将Angular 2的托管服务器托管在localhost:4200,而Express服务器托管在localhost: 3000。 I tried the following code but am getting the following error:
我尝试了以下代码,但出现以下错误:
Error: ENOENT: no such file or directory, stat 'C:\Users\corey\Desktop\Project\server\api\contact-form-submit'
Here is my contact-form.component.ts file: 这是我的contact-form.component.ts文件:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-contact-form',
templateUrl: './contact-form.component.html',
styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent {
constructor(private http: HttpClient) {}
onSubmit(form) {
this.http.post('http://localhost:3000/server/api/contact-form-submit', JSON.stringify(form.value)).subscribe();
console.log(form.value);
}
}
Here is my server.js file: 这是我的server.js文件:
var express = require('express');
var nodemailer = require('nodemailer');
var mg = require('nodemailer-mailgun-transport');
var bodyParser = require('body-parser');
var app = express();
var path = require('path');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
//trying to get contact form submission from angular 2 form here
app.get('/', function (req, res) {
res.sendfile('./api/contact-form-submit');
console.log('test');
});
//api key and domain for mailgun
var auth = {
auth: {
api_key: 'api-key-here',
domain: 'mailgun@domain here'
}
}
//trying to send email with nodemailer here
app.post('./api/send', function(req, res) {
var transporter = nodemailer.createTransport(mg(auth));
var mailOptions = {
from: 'postmaster@email.com',
to: 'email@goeshere.com',
subject: 'Website submission',
text: 'Name: ' + req.body.name + 'Email: ' + req.body.email + 'Message: ' + req.body.message,
html: '<p>Submission: </p><br><ul><li>Name: ' + req.body.name + '</li><li>Email: ' + req.body.email + '</li><li>Message: ' + req.body.message + '</li></ul>'
};
transporter.sendMail(mailOptions, function(error, info) {
if (error) {
console.log(error);
res.redirect('/');
} else {
console.log('Message sent.');
res.redirect('/');
}
})
});
app.listen(3000, function() {
console.log('Express started on port 3000');
});
I get successful form data to use within Angular 2, and I had the express server sending emails with a regular express post/get with html files... but I'm not understanding a key part of how to integrate Angular with Express and use it to send an email with Nodemailer. 我可以在Angular 2中使用成功的表单数据,并且我的Express服务器通过定期的Express Post / get发送带有html文件的电子邮件...但是我不了解如何将Angular与Express集成和使用的关键部分它可以通过Nodemailer发送电子邮件。 Any help here?
这里有什么帮助吗? Thanks.
谢谢。 This is my project structure.
这是我的项目结构。
I was answering to the similar question How to make post request from angular to node server 我正在回答类似的问题如何从角向节点服务器发出发布请求
When you post from angular you need to configure cross-origin
on your server. 从角度发布时,需要在服务器上配置
cross-origin
。
Checkout this github repo https://github.com/kuncevic/angular-httpclient-examples for that matter 查看此github存储库https://github.com/kuncevic/angular-httpclient-examples
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.