一尘不染

在开发环境中使用Angular CLI连接express.js

node.js

我找到了很棒的教程,该教程解释了如何使用Angular
CLI设置express.js,但是在本教程中,角度应用程序被编译到生产dist文件夹中:https : //scotch.io/tutorials/mean-app-
with-angular- 2和角度cli

如何将express.js与Angular
CLI集成在一起,但是我希望express.js与Angular应用程序的开发版本一起使用,并且如果我对express OR
angular应用程序进行更改,我希望nodemon重新启动。

已经花费了八个多小时试图使它正常工作。谢谢!

我不想每次对Angular应用进行更改时都需要运行“ ng
build”(这会花费很长时间)-我希望在将更改保存到我的角度应用中时立即重新加载(就像我在运行“ ng serve”一样) ‘)或快递应用。

我找到了一个教程,可以在其中连接Angular 2 QuickStart和Express,它可以工作,但是我正在寻找使用Angular CLI的方法。

我了解Angular CLI使用WebPack,而QuickStart使用System.js


阅读 255

收藏
2020-07-07

共1个答案

一尘不染

新答案

我15个小时的经验告诉我,在开发过程中尝试通过Express服务Angular应用不是一个好主意。正确的方法是在两个不同的端口上将Angular和Express作为两个不同的应用程序运行。Angular将像往常一样在端口4200和Express在端口3000上提供服务。然后为Express应用程序的API调用配置代理。

将proxy.config.json添加到Angular项目的根目录中:

{
  "/api/*":{
    "target":"http://localhost:3000",
    "secure":false,
    "logLevel":"debug"
  }
}

打开一个新的终端选项卡,然后运行以下命令以启动Express应用程序:

nodemon [YOUR_EXPRESS_APP.js] --watch server

(YOUR_EXPRESS_APP.js通常被命名为server.js或app.js。server是您保留所有Express应用程序文件的目录)

打开第二个终端选项卡,然后运行以下命令以启动Angular应用程序:

ng serve --proxy-config proxy.config.json

当对任何Angular应用程序文件进行更改时,这将确保重建Angular应用程序并重新加载浏览器。同样,对任何Express应用程序文件进行更改后,Express服务器也会重新启动。

您的Angular应用程序在这里:http:// localhost:4200 /

观看此视频,了解如何使用Angular
CLI为您的API调用配置代理

注意:此设置仅适用于开发环境。在生产中,您将需要运行ng buildAngular应用程序并将其放置在dist目录中,以由Express提供服务。在生产中,只有一个应用程序正在运行-
Express应用程序为您的Angular应用程序提供服务。

上一个答案

使用@echonax的输入,我想到了这个解决方案,该解决方案非常快:

  • 如本教程所述,将Express添加到Angular 2应用程序(使用Angular CLI构建)
  • 在终端中运行:

ng build -w & nodemon server.js --watch dist --watch server

这会将Angular应用重新构建到dist文件夹中,并且节点服务器将在每次发生时重新启动。但是,使用此设置不会自动刷新浏览器:(

这里的更多信息:

https://github.com/jprichardson/reload

2020-07-07