如何在同一个端口4200上运行angular 4 app和nodejs api进行生产和开发？

Question

我已经创建了角度4应用程序,我可以运行它ng serve --open并运行localhost:4200,我想要的是我也创建了api使用nodejs相同的角度项目现在我想运行该API,localhost:4200/api所以我尝试过这样的事情

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

/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它将运行角度应用程序但不运行节点js api所以想要运行两个,一旦我从角度应用程序或节点js应用程序更改它必须自动刷新.

Answer 1

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

有两种可能的解决方案.

1. 使用节点应用程序提供静态前端文件.然后你不能真正使用ng serve(这可能是你在现场直播时所做的).

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

这主要是我认为在开发过程中的一个问题,因为你很可能不会(也不应该)使用ng servelive,所以选项2将是我最好的推荐.

要配置代理,请在角度应用程序根目录中创建一个文件,proxy.config.json其中包含以下内容:

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

然后当你运行时ng serve,你用它ng serve --proxy-config proxy.config.json来运行它.

这是文档的链接

这是构建生产时的替代方案(上面的解决方案1):

要建立在生产使用ng build --prod,以创建一个生产就绪角度构建,然后(假设您在节点服务器上使用快递),使用类似app.use(express.static('dist/'))的作为解释的Express文档.我自己没有使用节点(我正在使用.NET Core)所以我担心我无法在细节方面提供更多.