如何无需构建Angular即可在Spring Boot中完成开发与测试

方案1：开发阶段最高效方案 - Spring Boot 反向代理ng serve内存服务 #

该方案完全无需前端构建打包，可保留ng serve的热更新能力，同时满足OAuth要求的同源访问规则：

• 保持本地ng serve正常启动，默认占用4200端口，热更新功能正常生效
• 在Spring Boot项目中引入轻量反向代理依赖，推荐用spring-cloud-starter-gateway（Webflux栈）或net.devh:spring-boot-proxy-server-starter（Web栈）
• 添加代理规则配置，将所有前端路径的请求转发到ng serve的内存服务，参考yaml配置：

spring:
  cloud:
    gateway:
      routes:
        - id: angular-ui-proxy
          uri: http://localhost:4200
          predicates:
            - Path=/**
          filters:
            - RemoveRequestHeader=Origin

• 直接访问Spring Boot的服务端口即可获取前端资源，所有请求同源，前端修改后ng serve自动热更新，刷新页面即可看到变更，无需任何额外操作。

方案2：无依赖兼容方案 - Angular监听增量构建+Spring Boot静态资源热加载 #

如果不想引入额外代理依赖，可采用增量构建配合静态资源热加载的方案，效率远高于全量构建后重新打包：

• 修改Angular项目angular.json中的outputPath配置，指向Spring Boot项目的静态资源目录，例如../springboot-project/src/main/resources/static
• 启动Angular增量监听构建命令：ng build --watch --configuration development，该命令只会对变更的代码做增量构建，耗时通常在1秒以内
• 在Spring Boot配置中开启静态资源热加载、禁用缓存，参考yaml配置：

spring:
  web:
    resources:
      static-locations: file:src/main/resources/static/
      cache:
        period: 0

• 前端修改完成后等待增量构建结束，刷新页面即可看到变更，无需重启后端、无需执行Maven打包。

生产打包优化方案 #

如果需要打出前后端一体的生产包，可在pom.xml中集成frontend-maven-plugin，自动执行npm install、ng build命令并将构建产物拷贝到静态资源目录，无需手动操作前端构建步骤。

注意事项 #

两种开发方案都需要将OAuth服务的重定向地址修改为Spring Boot的服务地址，不要使用ng serve的4200端口地址，避免跨域问题。

内容的提问来源于stack exchange，提问作者user2316219