如何在Angular和Node.JS Express的同一端口中运行? [英] How run in same port Angular and Node.JS Express?

问题描述

这可能是重复问题，但无法理解如何配置FE和BE一起运行它们.

This is might be possible to duplicate question but not able to understand how to configure FE and BE together run them both.

我已经通过此和这个问题，但听不懂.

I've gone through this and this questions, but couldn't understand.

我的Node + Express在4300上运行

My Node+Express running on 4300

app.post('/postData', function(req, res) {
//some worst logics here :)
});

还有

在5200上运行的Angular5.下面是我的FE服务，该服务调用了发布端点

Angular 5 running on 4200. Below is my FE service that calling post endpoint

postData(feData) {
        console.log(feData);
        this.http.post('/postData', feData, this.httpHeader).subscribe((data) => {
        });
    }

我尝试打开了两个cmd Windows:一个由node server.js运行server.js，另一个由ng serve运行.

What I tried is opened two cmd Windows: one to run server.js by node server.js and another one with ng serve.

结果:

404 not fount(cannot post)

我在做什么错了.

推荐答案

在这种情况下，您需要做的是将Angular 5应用程序移动到可在快速流程下运行的位置.您可以按照教程-参见项目2

What you need to do on this case is move your Angular 5 application to run under express process. You can achieve this following this tutorial - See item 2

我消除了一些麻烦，但我确实建议您看一下本教程.

I removed some complications but I really recommend you to take a look on the tutorial.

npm install --save express body-parser

创建一个文件来运行您的节点应用程序，例如server.js并添加以下代码:

Create a file to run your node app like server.js and add following code:

var app = require('app.js');
var debug = require('debug')('mean-app:server');
var http = require('http');

var port = normalizePort(process.env.PORT || '4300');
app.set('port', port);

var server = http.createServer(app);
server.listen(port);
server.on('listening', onListening);

function onListening() {
  var addr = server.address();
  debug('Listening on ' + port);
}

编辑"package.json"以指定您的应用启动方式:

Edit "package.json" to specify how you app will start:

"scripts": {
  "ng": "ng",
  "start": "ng build && node server.js",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

现在，创建将运行express的app.js:

Now, create app.js which will run express:

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');

var sample = require('./routes/sample.js');
var app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({'extended':'false'}));

//Put your angular dist folder here
app.use(express.static(path.join(__dirname, 'dist')));
app.use('/samples', express.static(path.join(__dirname, 'dist')));
app.use('/sample', sample);

module.exports = app;

为您的元素创建路线文件夹是一个好习惯.创建具有以下内容的文件routes/sample.js:

It's a good practice to create routes folder for your elements. Create a file routes/sample.js with following content:

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.send('RESTful API');
});

module.exports = router;

使用节点命令运行服务器:

Run the server using node command:

npm start

这篇关于如何在Angular和Node.JS Express的同一端口中运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！