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

Posted 2023-03-08

【中文标题】每当节点服务器重新启动时重新加载浏览器

【英文标题】：Reload browser whenever node server restarts

【发布时间】：2017-08-12 05:00:22

【问题描述】：

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

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

基本上，每当保存文件时，都会重新构建 Angular 应用程序，这最终也会触发节点服务器重新启动。

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

【问题讨论】：

唯一有效的方法是通过 websocket。使用 websocket，您可以触发重新加载事件并在 Angular 应用程序中捕获它并重新加载应用程序。 Webpack 是开发工具，但在生产环境中你只有构建，所以无论你想做什么都在构建中。 Webpack 还添加了一些额外的文件来控制开发环境。祝你好运

你能举例说明如何做到这一点吗？我只关心开发环境

socket.io: socket.io/docs，完整教程在这里syntaxsuccess.com/viewarticle/…

按照上面的链接它有完整的例子

无需像@BabarBilal 建议的那样使用套接字自己制作，已经有刷新浏览器的工具，例如：github.com/jprichardson/reload

【参考方案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 应用程序：

nodemon [YOUR_EXPRESS_APP.js] --watch 服务器

（YOUR_EXPRESS_APP.js 通常命名为 server.js 或 app.js。server 是您保存所有 Express 应用文件的目录）

打开第二个终端选项卡并运行以下命令来启动 Angular 应用程序：

ng 服务 --proxy-config proxy.config.json

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

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

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

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