如何在生产和开发的同一端口4200上运行angular 4 app和nodejs api? [英] how to run angular 4 app and nodejs api on same port 4200 for both production and development?

问题描述

我已经创建了angular 4应用，并且可以使用ng serve --open运行它，并且它可以在localhost:4200上运行， 我想要的是我也已经在同一角度项目中使用nodejs创建了api，现在我想在localhost:4200/api上运行该API，所以我尝试了类似的方法

I have created angular 4 app and I can run it using ng serve --open and it runs on localhost:4200 , what I want is I have also created api using nodejs in same angular project now I want to run that API at localhost:4200/api so I have tried something like this

我的angular 4和nodejs结构看起来像这样

my angular 4 and nodejs srtucture look like this

/dist
/server
  /routes
  /server
/src
app.js
package.json

在我使用的app.js中

in app.js I used

app.use(express.static(path.join(__dirname, 'dist')));
app.use('/app/api', apiRoutes);
const port = process.env.PORT || '3000';
server.listen(port, () => console.log(`API running on localhost:${port}`));

一旦我使用nodemon app.js运行并在localhost:3000上运行，它就会运行我的角度应用程序，这很好，比起在localhost:3000/app/api上，它也可以正常工作，而且很好，

Once I run using nodemon app.js and go at localhost:3000 it run my angular app and it's fine and than I go at localhost:3000/app/api it's also work fine and good ,

但是当我更改角度应用程序时，它不会自动刷新我的应用程序，因为它当前正在运行节点应用程序以进行刷新，因此我需要运行ng build，然后它将影响我对角度应用程序的新更改

But when I change in angular app it's not auto refresh my app because it's running node app currently for refresh it I need to run ng build and than it will effect my new changes on angular app

所以，我要运行ng serve --open，它将运行角度应用程序而不运行节点js api，因此要同时运行它们，一旦我从角度应用程序或节点js应用程序中进行任何更改，它都必须自动刷新.

So, What I want is to run ng serve --open it will run angular app but not node js api so want to run both and once i change in any from angular app or node js app it must be auto refresh.

推荐答案

您不能在同一端口上运行两个不同的应用程序.当您运行ng serve时，Angular-cli在幕后使用一个nodejs服务器(从技术上讲是webpack-dev-server)，这意味着该端口已在使用中.

You can't have two different applications running on the same port. Angular-cli uses a nodejs server (technically it's webpack-dev-server) behind the scenes when you run ng serve, which means that port is already in use.

有两种可能的解决方案.

There are two possible solutions.

1. 使用您的节点应用程序来提供静态前端文件.然后您就不能真正使用ng serve(这可能是您实时运行时要执行的操作).

1. Use your node application to serve the static frontend files. Then you can't really use ng serve (this is probably what you'd do when running live).

使用具有不同端口的nodejs，并使用Angular的代理配置，以使Angular认为api端口实际上是4200(这在开发期间可能是最好的).

Use nodejs with a different port, and use Angular's proxy config, to have Angular think the api port is actually 4200 (this is probably best during development).

我认为这主要是开发过程中的一个问题，因为您很可能(也不应)实时使用ng serve，因此，选项2是我的最佳建议.

This is primarily a concern during development I reckon, since you most likely wont (and shouldn't) be using ng serve live, so option 2 would be my best recommendation.

要配置代理，请在角度应用程序根目录中创建一个名为proxy.config.json的文件，其内容如下:

To configure a proxy, you create a file in your angular application root directory called proxy.config.json with the following content:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

然后，当您运行ng serve时，应改为使用ng serve --proxy-config proxy.config.json来运行它.

Then when you run ng serve, you run it with ng serve --proxy-config proxy.config.json instead.

这是文档的链接

为生产而建造时，这里是一种替代方法(上面的解决方案1):

要在生产环境中进行构建，请使用ng build --prod来创建可用于生产环境的Angular构建，然后(假设您在节点服务器上使用Express)，如快速文档.我自己不是在使用节点(我是在使用.NET Core)，所以恐怕我无法提供更多详细信息.

To build in production you use ng build --prod to create a production ready Angular build and then (assuming you use Express on your node server), use something like app.use(express.static('dist/')) as explained in the Express documentation. I'm not using node myself (I'm using .NET Core) so I'm afraid I can't provide much more in terms of details.

这篇关于如何在生产和开发的同一端口4200上运行angular 4 app和nodejs api?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！