在Heroku构建Angular应用失败：Angular CLI工作区外运行报错

问题根源 #

1. 初始部署时Heroku仅识别Java后端，未构建Angular前端，导致Spring Boot的静态资源目录无前端文件，首页返回404。
2. 后续将package.json移至根目录后，执行ng build时因Angular工作区配置文件（angular.json）在Frontend子目录，根目录无工作区上下文，触发报错。

修复方案 #

1. 恢复目录结构 #

将package.json、angular.json、server.js放回Frontend子目录，保持原有项目结构。

2. 配置Heroku多Buildpack #

设置Buildpack顺序为先Node.js，后Java，确保Heroku先构建前端，再打包后端：

heroku buildpacks:add --index 1 heroku/nodejs
heroku buildpacks:add --index 2 heroku/java

3. 根目录新增package.json #

在项目根目录创建package.json，定义前端构建脚本，指定Node.js版本：

{
  "scripts": {
    "heroku-postbuild": "cd Frontend && npm install && ng build --prod"
  },
  "engines": {
    "node": "18.15.0",
    "npm": "9.6.2"
  }
}

此脚本会让Heroku进入Frontend目录安装依赖并执行构建，避免工作区上下文错误。

4. 配置Maven自动复制前端产物 #

修改pom.xml，添加Maven资源插件，将前端构建后的dist/frontend目录文件复制到Spring Boot的静态资源目录：

<plugin>
  <artifactId>maven-resources-plugin</artifactId>
  <executions>
    <execution>
      <id>copy-frontend-dist</id>
      <phase>process-resources</phase>
      <goals>
        <goal>copy-resources</goal>
      </goals>
      <configuration>
        <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
        <resources>
          <resource>
            <directory>Frontend/dist/frontend</directory>
            <filtering>false</filtering>
          </resource>
        </resources>
      </configuration>
    </execution>
  </executions>
</plugin>

这样Maven打包后端时，会自动将前端静态文件纳入Spring Boot的jar包，启动后可直接访问首页。

5. 本地验证与部署 #

• 本地测试：先进入Frontend目录执行npm install && ng build --prod，再执行./mvnw clean package，启动生成的jar包，访问http://localhost:8080验证前端页面是否正常显示。
• 部署到Heroku：推送代码至Github或直接推送至Heroku，Heroku会按Buildpack顺序完成前端与后端的构建打包，启动后首页即可正常访问。

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