Angular6项目部署Heroku报错：找不到/app/server.js模块

核心问题总结 #

你的Angular应用部署Heroku后崩溃+空白页，主要是三个关键问题导致的：

1. server.js路径与启动脚本不匹配
2. server.js代码存在语法与路径计算错误
3. Node.js对ES模块的支持配置缺失

分步解决 #

1. 同步启动脚本与Procfile路径 #

你的server.js放在src目录下，但最初package.json的start脚本是node server.js，Heroku会从项目根目录执行命令，自然找不到文件。虽然你添加了Procfile，但需要同步修正package.json的脚本：

• 保持Procfile内容不变：

  web: node src/server.js
  

• 修改package.json中的start脚本：

  "start": "node src/server.js"
  

2. 修复server.js的代码错误 #

你的server.js存在两处致命问题：

• 未正确导入静态文件服务模块，且路径计算错误（__dirname指向src目录，而dist在项目根目录）
• 使用ES模块语法但未配置Node.js支持

方案一：改用CommonJS语法（更兼容Heroku默认环境）

修正后的server.js代码：

const express = require('express');
const path = require('path');
const app = express();

// 正确指向根目录下的dist文件夹
app.use(express.static(path.join(__dirname, '../dist')));

// 处理所有路由，返回Angular的index.html（支持SPA路由）
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../dist/index.html'));
});

// 监听Heroku分配的端口
app.listen(process.env.PORT || 8080, () => {
  console.log('Server running on port:', process.env.PORT || 8080);
});

方案二：保留ES模块语法（需额外配置）

如果坚持用import语法，需要在package.json根节点添加"type": "module"，同时修正路径计算：

import express from 'express';
import path from 'path';
const app = express();

// 基于ES模块的路径计算
const currentDir = path.dirname(new URL(import.meta.url).pathname);
app.use(express.static(path.join(currentDir, '../dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(currentDir, '../dist/index.html'));
});

app.listen(process.env.PORT || 8080);

同时在package.json中添加：

"type": "module"

3. 确认dist目录的生成路径 #

默认ng build --prod会将产物输出到项目根目录的dist文件夹，你的postinstall脚本是正确的。如果之前修改过angular.json中的outputPath，需要对应调整server.js里的路径。

4. 重新部署验证 #

完成修改后，提交代码到Heroku：

git add .
git commit -m "Fix deployment issues"
git push heroku main

额外检查点 #

• 指定Node.js版本：在package.json中添加engines字段，避免版本兼容问题：

  "engines": {
    "node": "14.x",
    "npm": "6.x"
  }
  

• 实时查看日志：执行heroku logs --tail，确认postinstall阶段成功生成dist目录，且server.js正常启动。

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