Angular+Node.js(TS)项目Heroku部署heroku-postbuild阶段报错如何解决？

云原生阿岚

2026-9-27

Heroku部署Node.js(TS)+Angular应用报错解决方案

核心报错原因

你遇到的heroku-postbuild阶段报错并非来自api的路径配置，直接原因是执行ng build时front目录下没有node_modules文件夹：Heroku默认只会在项目根目录执行npm install安装根目录package.json的依赖，不会自动处理front子目录的依赖包。

分步修复方案

1. 修复postbuild阶段依赖缺失问题

修改根目录package.json中的heroku-postbuild脚本，进入front目录后先安装依赖再执行构建：

{
  "scripts": {
    "heroku-postbuild": "cd front && npm install && npx ng build --configuration production",
    "start": "cd api && npm run start"
  }
}

添加npx前缀是为了避免全局调用ng命令找不到的问题，优先使用front目录下安装的Angular CLI。

2. 修复api/index.ts中的静态资源路径错误

你猜测的路径问题确实存在，当前配置的mymusicads目录不存在，需要根据项目目录结构调整寻址逻辑：
Angular构建后的产物默认生成在<项目根目录>/front/dist/front下，而__dirname指向api编译后JS文件的所在目录，需要向上跳转层级定位到根目录：

// 假设api的TS编译后输出到api/dist目录，__dirname为<根目录>/api/dist，需向上跳2层到根目录
app.use(express.static(path.join(__dirname, '..', '..', 'front', 'dist', 'front')));

app.get('/', (req: Request, res: Response) => {
  res.sendFile(path.join(__dirname, '..', '..', 'front', 'dist', 'front', 'index.html'));
});

如果你的api编译后的JS文件直接放在api目录下，只需将路径中的..数量改为1即可，可本地执行console.log(path.join(__dirname, '..', '..', 'front', 'dist', 'front'))验证路径正确性。