每当节点服务器重新启动时重新加载浏览器

Question

我有一个与Angular 2应用程序捆绑在一起的Express应用程序，我一起运行：

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

基本上，无论何时保存文件，都会重建角度应用程序，并最终触发节点服务器重启。

此外，我想在浏览器上重新加载应用，以便我不必手动重新加载它。这样做的最佳方式是什么？以前，当我使用ng serve时，浏览器重新加载是由WebPack完成的

Answer 1

在此处查看第一个答案Hooking up express.js with Angular CLI in dev environment

在此处复制答案

我15个小时的经历告诉我，在开发期间尝试使用Express服务Angular应用程序并不是一个好主意。正确的方法是在两个不同的端口上运行Angular和Express作为两个不同的应用程序。 Angular将照常在端口4200和Express端口3000上提供。然后为Express应用程序配置API调用的代理。

将proxy.config.json添加到Angular 2项目的根目录：

{   API / *“：{     “目标”： “http://localhost:3000”，     “安全”：假的，     “日志等级”：“调试”   } } 打开一个新的终端选项卡并运行此命令以启动Express app：

nodemon [YOUR_EXPRESS_APP.js] - 手表服务器

（YOUR_EXPRESS_APP.js通常命名为server.js或app.js.服务器是保存所有Express应用程序文件的目录）

打开第二个终端选项卡并运行此命令以启动Angular app：

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

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

你的Angular应用就在这里：http://localhost:4200/

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

注意：此设置仅适用于开发环境。在生产中，您将需要运行ng build并将Angular应用程序放在dist目录中，以便由Express提供。在制作中，只有一个应用程序正在运行 - 一个Express应用程序，用于提供Angular应用程序。