如何在同一个端口 Angular 和 Node.JS Express 中运行？答案

【问题标题】：How run in same port Angular and Node.JS Express?如何在同一个端口 Angular 和 Node.JS Express 中运行？
【发布时间】：2018-06-18 13:09:40
【问题描述】：

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

我已经解决了this 和this 的问题，但无法理解。

我的 Node+Express 在 4300 上运行

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

和

Angular 5 在 4200 上运行。下面是我调用 post 端点的 FE 服务

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

我尝试的是打开两个 cmd Windows：一个由 node server.js 运行 server.js，另一个使用 ng serve。

结果：

404 not fount(cannot post)

我做错了什么。

【问题讨论】：

为什么不将'localhost:4300/postData' 添加到您的http 调用中？
您不能在 Github Pages 上托管服务器端代码。仅适用于静态网站：help.github.com/articles/what-is-github-pages
@Shadowlauch 刚才只是我按照你说的尝试了......我又失败了。 404 未找到
谢谢@Brandon，我真的不知道这一点
不客气。我经常使用 Node 和 Angular，并在 Heroku 上托管我的网站。它很便宜，而且设置起来再简单不过了。我将 Angular 和 Node 应用程序放在不同的测功机上，而不是尝试在同一个进程中运行它们。

标签： node.js angular express angular5

【解决方案1】：

在这种情况下，您需要做的是移动您的 Angular 5 应用程序以在 express 进程下运行。您可以在tutorial 之后实现这一点 - 请参阅第 2 项

我消除了一些复杂性，但我真的建议您看一下教程。

npm install --save express body-parser

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

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”以指定您的应用将如何启动：

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

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

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，内容如下：

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

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

module.exports = router;

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

npm start

【讨论】：

在完成上述配置之后。现在可以成功访问我的 api ... 犯的错误是我没有设置通用路由器。非常感谢
将 angular 放入 dist 文件夹是什么让它与 express 在同一个端口运行？
是的。 Express 将在您应用“express.static”功能的文件夹中提供纯 html 文件。它告诉将这些文件作为静态内容提供。在此文件夹中复制 Angular 构建结果后，它将为它们提供服务。

【解决方案2】：

根据经验，将后端或微服务与前端应用程序分开。

【讨论】：

我来晚了，有什么解决办法吗？在同一个端口上运行 Angular 前端和节点服务
请解释原因！如果您的应用程序是孤立的，即 API 对除自身以外的所有域关闭，那么这种架构对我来说似乎很好。