部署Angular 6到Heroku后页面空白问题求助

我帮你梳理几个可能的问题点，结合你的配置来看，这些调整应该能解决空白页的问题：

1. 修正server.js中的静态文件路径 #

你的angular.json里配置的outputPath是dist/koko-and-friend，但server.js里的静态资源指向的是/dist，这会导致Express找不到正确的静态文件（比如编译后的JS、CSS）。你需要把路径调整为具体的项目目录：

修改后的server.js：

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

// 指向Angular构建后的完整产物目录
app.use(express.static(path.join(__dirname, 'dist/koko-and-friend')));

app.get('/*', (req, res) => {
  // 确保index.html的路径和构建输出一致
  res.sendFile(path.join(__dirname, 'dist/koko-and-friend/index.html'));
});

app.listen(process.env.PORT || 4201, () => {
  console.log('Connected to Port');
});

2. 简化npm脚本，避免全局安装依赖 #

你的preinstall脚本里全局安装了多个Angular工具，但Heroku的构建环境不需要全局安装这些包——你的devDependencies里已经包含了所有构建所需的依赖，全局安装反而可能引发权限或版本冲突问题。建议删除preinstall脚本：

修改后的package.json中scripts部分：

"scripts": {
  "ng": "ng",
  "start": "node server.js",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "postinstall": "ng build --aot --prod"
}

3. 确保base href配置正确 #

有时候Angular应用的静态资源加载失败是因为base href设置不正确，你可以在构建命令里显式指定根路径：

把postinstall脚本修改为：

"postinstall": "ng build --aot --prod --base-href /"

同时确认src/index.html里的<base href="/">标签存在，这能保证所有静态资源都从根路径加载。

4. 检查Heroku运行日志定位细节 #

即使部署过程没报错，也可以通过Heroku日志查看运行时的错误（比如资源404）：

heroku logs --tail

如果看到类似GET /runtime.js 404的错误，就说明静态资源路径还是有问题，回到第一步再核对路径。

5. 确认.gitignore未排除dist目录（可选） #

虽然你说Heroku上能看到dist目录，但还是建议检查下本地的.gitignore文件，如果里面有dist/，其实不用删除——因为postinstall会在Heroku服务器上重新构建生成dist目录，所以本地是否提交dist不影响服务器构建。

按照以上步骤调整后，重新部署到Heroku应该就能正常显示页面了。

内容的提问来源于stack exchange，提问作者Sherwin Ablaña Dapito