Angular应用部署到Express/Heroku后无法显示，求助解决

看起来你的核心问题是server.js没有指向Angular构建后的静态文件，而是直接指向了源码的src文件夹——这就是为什么ng serve能正常运行，但用Express服务器就显示空白的原因。ng serve是在开发模式下编译并提供服务，而Express需要访问构建后的生产环境文件。下面是分步解决方案：

第一步：修正server.js的静态文件路径 #

你的server.js当前指向/src，但Angular项目部署前需要先执行ng build生成构建产物（默认在dist/你的项目名文件夹下）。修改server.js如下：

const express = require('express');
const app = express();
const path = require('path');
const port = process.env.PORT || 8000;
const server = require('http').Server(app);

// 指向Angular构建后的静态文件目录
// 注意：将`your-app-name`替换成你的Angular项目名称（查看package.json里的name字段）
app.use(express.static(path.join(__dirname, 'dist/your-app-name')));

// 处理所有路由，返回index.html（SPA路由必须的配置）
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'dist/your-app-name/index.html'));
});

server.listen(port, function() {
  console.log("App running on port " + port);
});

第二步：本地测试前先完成构建 #

在本地运行Express服务器前，先执行Angular构建命令生成生产文件：

ng build --prod

这会在项目根目录下生成dist/your-app-name文件夹，之后运行node server.js，访问localhost:8000应该就能正常显示应用了。

第三步：配置Heroku的部署脚本 #

在你的package.json里添加/确认以下脚本，Heroku会自动执行这些命令完成部署：

{
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build --prod",
    "postinstall": "npm run build"
  }
}

• postinstall：Heroku安装完项目依赖后，会自动执行这个命令帮你构建Angular项目
• start：启动Express服务器的命令，Heroku会用它来启动你的应用

关于HashLocationStrategy的补充 #

你已经在app.module.ts里配置了HashLocationStrategy，这个配置本身是没问题的，但需要确保：

1. index.html里的<base href="/">保持默认即可，无需修改
2. 路由跳转时会自动带上#（比如/#/home），Express的/*路由依然能正确返回index.html，只要静态文件路径配置正确，这个策略就能正常工作

额外检查项 #

• 确认dist/your-app-name文件夹里的文件完整，包含index.html、main.js等打包后的核心文件
• 如果你用的是Angular 14及以上版本，构建后的目录可能是dist而非dist/your-app-name，此时需要把server.js里的路径改成dist

这样调整后，无论是本地用Express运行还是部署到Heroku，都应该能正常显示你的Angular应用了。

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