一尘不染

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

node.js

我已经创建了angular 4应用程序,并且可以使用ng serve --open它运行并在其上运行localhost:4200,我想要的是我也已经nodejs在同一角度项目中创建了api
,现在我想在该API上运行,localhost:4200/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是它将运行angular应用程序,但不能运行node js
api,因此要同时运行它们,一旦我更改了angular应用程序或node js应用程序中的任何一个,它必须是自动刷新的。


阅读 227

收藏
2020-07-07

共1个答案

一尘不染

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

有两种可能的解决方案。

  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改为运行它。

这是文档的链接


这是为生产而构建时的替代方法(上述解决方案1):

打造生产使用ng build --prod,以创建一个生产就绪角度构建,然后(假设您在节点服务器上使用快递),使用类似app.use(express.static('dist/'))的解释中Express文档。我自己不是在使用节点(我是在使用.NET Core),所以恐怕我无法提供更多详细信息。

2020-07-07