angular - 开发期间 Springboot 热重载 Angular 8

Question

我正在使用 Springboot 和 Angular 8 创建一个应用程序。我是 Springboot 的新手。我的计划是在 src/main/resources 内构建前端(ng build - 将从 mvn clean package 调用)。

问题是，如果我这样做，当前端发生一些更改时，我无法热重载。是否有构建此类应用程序的最佳实践？我的目的是将后端和前端打包在同一个 jar 文件中，但同时我需要直接在浏览器上查看字体中更改的文件。

另一方面，如果我使用 ngserve 启动前端(在开发期间)，那么由于跨源问题，它将无法工作。

Answer 1

在开发过程中，我强烈建议你不要将前端与后端(spring boot)捆绑在一起，这会让事情变得更加复杂并且更难以开发。据我所知，Spring Boot 中无法“热重新加载”静态资源中的文件。即使，您将如何首先重新编译您的 Angular 项目？对于 mvn 包，这是在编译时完成的，而不是运行时。

为了解决您的问题，我将执行以下操作:

• 开发前端时使用 ngserve
• 独立启动 Spring Boot 后端(没有捆绑的前端)

为了解决您提到的 CORS 问题，我将使用代理功能，Angular 提供了开箱即用的功能:

1. 将代理配置文件添加到 angular.json 的 serve 部分:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "client:build",
    "proxyConfig": "proxy.conf.json"   <------- proxy config
  },
  "configurations": {
    "production": {
      "browserTarget": "client:build:production"
    }
  }
},

然后，将代理配置添加到您的项目中:

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

您可能需要根据本地端口设置等更改配置。当您向 http://localhost:4200/api/any/endpoint 发出请求时，它将被代理到 http://localhost:8080/api/any/endpoint code> 不违反浏览器的任何 CORS 规则。

然后，您的前端应该配置为向当前所在的域发出请求，或者您可以为生产和开发使用不同的环境文件，您可以在其中简单地更改 URL。