Angular+Spring Boot项目执行ng build后出现404错误如何解决？

你的问题本质是多环节构建产物残留、缓存未彻底清理、构建路径配置不一致共同导致的，按以下步骤操作即可彻底解决：

• 第一步：全链路清理所有残留文件
  不要仅依赖mvn clean的默认清理逻辑，手动删除所有构建生成的内容：
  1. 进入Angular前端子目录，执行命令：
     Linux/macOS：rm -rf dist node_modules package-lock.json
     Windows：rmdir /s /q dist node_modules package-lock.json
  2. 回到项目父目录，执行命令：
     Linux/macOS：rm -rf target
     Windows：rmdir /s /q target
• 第二步：固化Angular构建配置
  不要每次手动传入--output-hashing=all参数，直接在angular.json中永久配置：
  找到 projects -> 你的项目名 -> architect -> build -> options 节点，添加/修改以下配置：

  "outputHashing": "all",
  "outputPath": "../src/main/resources/static"
  

  确保outputPath路径指向Spring Boot默认读取静态资源的src/main/resources/static目录，避免构建产物没打进jar包导致404。
• 第三步：修正Maven前端构建插件配置
  你使用的frontend-maven-plugin默认会跳过已执行过的构建步骤，需要配置强制重新执行：
  在pom.xml的插件配置中添加<force>true</force>，同时确保构建目标是生产环境构建，示例配置：

  <execution>
    <id>npm run build</id>
    <goals>
      <goal>npm</goal>
    </goals>
    <configuration>
      <arguments>run build --prod</arguments>
      <force>true</force>
    </configuration>
  </execution>
  

• 第四步：避免Git分支切换带来的产物残留
  在项目根目录的.gitignore文件中添加以下规则，不要把构建产物提交到Git仓库，切分支时就不会带入旧分支的残留文件：

  node_modules/
  */dist/
  target/
  package-lock.json
  

• 额外验证方案
  构建完成后可以执行jar tf 你的jar包名称.jar | grep static查看jar包内的静态资源列表，确认都是最新生成的带hash后缀的文件，即可排除构建产物漏打包的问题。
  开发阶段测试时可以在浏览器F12控制台勾选「禁用缓存」，同时在Spring Boot的application.yml中添加配置关闭服务端静态资源缓存：

  spring:
    web:
      resources:
        cache:
          period: 0
  

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