如何在生产和开发的同一端口4200上运行angular 4应用程序和nodejs api？

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

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

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

在我使用的app.js中

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，它也可以正常工作，并且很好，

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

所以，我要运行ng serve --open，它将运行有角度的应用程序，但不能运行node js api，因此要同时运行它们，并且一旦我从angular应用程序或node js应用程序中进行任何更改，它都必须是自动刷新的。

您不能在同一端口上运行两个不同的应用程序。运行ng serve时，Angular-cli在后台使用了一个nodejs服务器（技术上是webpack-dev-server），这意味着该端口已在使用中。

有两种可能的解决方案。

1. 使用您的节点应用程序来提供静态前端文件。这样您就无法真正使用ng serve（这可能是实时运行时要执行的操作）。

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

我认为这主要是开发过程中的一个问题，因为您很可能不会（也不应该）实时使用ng serve，所以选项2是我的最佳建议。

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

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}
然后运行ng serve时，改为使用ng serve --proxy-config proxy.config.json运行它。 

Here's a link to the documentation

这里是生产版本的替代方案（上述解决方案1：

要构建生产版本，请使用ng build --prod至create a production ready Angular build，然后（假设您在节点服务器上使用Express），请使用app.use(express.static('dist/'))之类的内容，如Express documentation中所述。我自己不是在使用节点（我是在使用.NET Core），所以恐怕我无法提供更多详细信息。