如何在 Angular、spring-boot、maven 项目中配置项目以自动重新加载浏览器

Posted 2023-02-27

【中文标题】如何在 Angular、spring-boot、maven 项目中配置项目以自动重新加载浏览器

【英文标题】：How to configure project to auto reload browser in angular, spring-boot, maven project

【发布时间】：2019-01-15 03:31:33

【问题描述】：

该项目使用 Maven、Spring Boot、Angular、Visual Studio Code 编辑器。

如何配置项目以在 Angular 文件更改时重新加载浏览器？

spring-boot with angular app

通过 pom.xml 中的这种依赖关系，当 java 文件更改时，浏览器会重新加载。

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-devtools</artifactId>
  <scope>runtime</scope>
</dependency>

【问题讨论】：

ng serve --watch 有什么问题？

应用在$ mvn spring-boot:runlocalhost:8080运行

在package.json中设置"start": "ng serve --watch"怎么样？

使用live reload怎么样npmjs.com/package/livereload它可以用作chrome插件或代码。

【参考方案1】：

客户端-服务器集成

服务器和客户端项目分别位于端口 8080 和 4200 上。

客户端项目的服务器将是“前端”（localhost:4200），所有请求都将由该服务器处理，除了带有“/”模式的 URL。

4200 的客户端服务器会将任何“/”请求代理到“后端”服务器（本地主机：8080）。

要配置此设置，请创建一个包含以下内容的文件“proxy.conf.json”。

  "/" :
    "target" : "http://localhost:8080",
    "secure" : false
  

修改package.json中的“start”脚本：

"scripts": 
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
,

启动“前端”

npm start

启动“后端”

mvn spring-boot:run