如何在同一端口上运行Angular和Node.JS Express？

Question

这可能是一个重复的问题，但我不知道如何配置前端和后端以使它们同时运行。

我已经阅读了 这个 和 这个 问题，但无法理解。

我的 Node+Express 运行在 4300 端口。

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

你好，以下是我的前端服务代码，使用Angular 5运行在4200端口上。此代码调用了一个post接口。

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

我尝试打开两个cmd窗口：一个用node server.js运行server.js，另一个使用ng serve。

结果：

404 not fount(cannot post)

我做错了什么。

- Mr. Learner

---

为什么不直接将'localhost:4300/postData'添加到您的http调用中呢？ - Shadowlauch

你不能在Github Pages上托管服务器端代码，它只适用于静态网站：https://help.github.com/articles/what-is-github-pages/ - Brandon Taylor

谢谢你，@Brandon。我真的不知道那个。 - Mr. Learner

不用谢。我经常使用Node和Angular，并在Heroku上托管我的站点。这是便宜且易于设置的。我将Angular和Node应用程序保留在不同的dynos中，而不是尝试在同一进程中运行它们。 - Brandon Taylor

我已经使用Nest构建了两个应用程序，并且都带有Angular 5+前端，没有任何问题地部署到了Heroku。为什么您觉得需要在同一端口上运行应用程序？ - Brandon Taylor

Answer 1

你需要做的是将你的 Angular 5 应用程序移动到 Express 进程下运行。您可以通过按照此教程 (查看第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"
},

现在，创建 app.js 文件来运行 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;

在It技术中，创建routes文件夹来存储元素是一种很好的实践。创建一个名为routes/sample.js的文件，其内容如下：

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

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

module.exports = router;

使用 node 命令来运行服务器：

npm start

- Marcio Jasinski

---

在跟进了上述配置之后，现在我能够成功访问我的API了... 我犯的错误是没有设置通用路由。非常感谢。 - Mr. Learner

将Angular放在dist文件夹中是什么让它与Express在同一端口运行？ - YulePale

是的。Express会在应用“express.static”函数的文件夹中提供纯HTML文件。它告诉服务器将这些文件作为静态内容提供。一旦您将Angular构建结果复制到此文件夹中，它就会为其提供服务。 - Marcio Jasinski

我成功地从同一台服务器上运行了API和网站。但是当用户从浏览器刷新任何页面时，它会将他们带到主页。我的要求是，当用户在页面https://myserver.com/books/434334上，并且当用户单击浏览器刷新按钮时，页面应该停留在https://myserver.com/books/434334而不是https://myserver.com/books。 - Hemant

有没有办法同时调试Express服务器和Angular项目？我在Angular组件文件中添加了一些断点，但始终无法触发。 - Kerwen

Answer 2

通过经验，将后端或微服务与您的前端应用程序分开。

- Joel Wembo

---

对我来说已经太晚了，有什么解决方案吗？如何在同一端口上运行Angular前端和Node服务？ - exequielc

请解释一下为什么！如果您的应用程序是隔离的，即API仅对自身以外的所有域关闭，则这种架构对我来说似乎很好。 - bigZ