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

问题描述

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

我已经浏览了这个和这个问题，但无法理解.

我的 Node+Express 在 4300 上运行

app.post('/postData', function(req, res) {//这里有一些最糟糕的逻辑:)});

和

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

postData(feData) {控制台日志(feData)；this.http.post('/postData', feData, this.httpHeader).subscribe((data) => {});}

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

结果:

<块引用>

404 not fount(无法发布)

我做错了什么.

解决方案

在这种情况下，您需要做的是将您的 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('端口', 端口);var server = http.createServer(app);server.listen(端口)；server.on('listening', onListening);函数 onListening() {var addr = server.address();debug('监听'+端口);}

编辑package.json"以指定您的应用程序将如何启动:

脚本":{"ng": "ng","start": "ng build && node server.js","build": "ng build","test": "ng 测试","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'}));//把你的 angular dist 文件夹放在这里app.use(express.static(path.join(__dirname, 'dist')));app.use('/samples', express.static(path.join(__dirname, 'dist')));app.use('/sample', 样本);module.exports = 应用程序；

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

var express = require('express');var router = express.Router();router.get('/', function(req, res, next) {res.send('RESTful API');});module.exports = 路由器；

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

npm start

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.

My Node+Express running on 4300

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

And

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) => {
        });
    }

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

Result:

404 not fount(cannot post)

What am I doing wrong.

解决方案

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

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);
}

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"
},

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;

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屋！