Angular5升级后Heroku部署报错：找不到模块app/dist/server/app.js

看起来你遇到的核心问题是Heroku启动时错误地在路径前添加了app/前缀，导致找不到你的server文件。结合你之前Angular2部署正常、升级后出问题的情况，我整理了几个大概率的解决方向：

1. 检查Angular构建配置的输出路径 #

Angular5使用的是.angular-cli.json（而非Angular6+的angular.json），升级过程中可能不小心修改了输出路径配置。打开你的.angular-cli.json，找到apps数组里的outDir字段：

{
  "apps": [
    {
      "outDir": "dist/server",
      // 其他配置项...
    }
  ]
}

确保outDir的值是dist/server，和你本地生成的路径完全一致。如果这里写成了app/dist/server或其他带app/前缀的路径，就会导致Heroku上生成的文件位置偏离预期。

2. 确认Procfile的路径与位置 #

Heroku执行Procfile命令时，默认工作目录是你的Git仓库根目录。你需要做两个确认：

• Procfile必须放在Git仓库的根目录下，不能嵌套在任何子文件夹中；
• 命令里的路径dist/server/app.js是相对于根目录的，不要额外添加前缀。

3. 排查package.json的start脚本 #

如果你的package.json里配置了start脚本，Heroku会优先使用它而非Procfile的配置。比如如果你的start脚本是：

"scripts": {
  "start": "node app/dist/server/app.js"
}

这就会直接导致Heroku去查找带app/前缀的路径。你需要把它修改为：

"scripts": {
  "start": "node dist/server/app.js"
}

或者直接删除start脚本，让Heroku使用Procfile的配置。

4. 验证Heroku的工作目录 #

你可以通过Heroku CLI运行命令，确认dyno的当前工作目录：

heroku run pwd

如果返回的是/app/app，说明工作目录被意外设置到了app子目录。这时候你可以修改Procfile的路径为../dist/server/app.js，或者排查是否有第三方插件、自定义配置导致了工作目录变更。

5. 清理Heroku构建缓存 #

旧的构建缓存有时会残留错误的路径配置，你可以尝试清理缓存后重新部署：

heroku repo:purge_cache -a your-app-name
git commit --allow-empty -m "Purge build cache"
git push heroku main

我之前升级Angular版本到5时也遇到过类似的构建路径问题，调整.angular-cli.json的outDir就顺利解决了，希望这些步骤能帮到你。

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