Angular 6 + Express部署问题：dist文件加载出现404错误

我帮你排查了一下，你遇到的main、styles等文件404问题，核心原因是Express的静态资源目录配置错误，导致它找不到Angular打包后的js、css文件。

问题分析 #

你的Angular项目执行ng build --prod后，所有静态资源（js、css、图标等）都生成在了dist/culture目录下，但你的Express代码里设置的静态目录是项目根目录（__dirname）：

app.use(express.static(__dirname));

当浏览器加载index.html后，会请求/styles.aaf8a2468e47be90b64b.css、/main.36d7357da7cc32c08c65.js这类根路径的资源，Express会去项目根目录下找这些文件——但它们实际在dist/culture里，所以自然返回404。

解决方案 #

修改server.js中的静态资源目录配置，指向Angular打包后的输出目录：

var express = require('express'); 
var app = express(); 
var server = require('http').Server(app); 
var bodyParser = require('body-parser'); 

// 关键修改：将静态目录指向dist/culture
app.use(express.static(__dirname + '/dist/culture')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({extended: true})); 

server.listen(2000, function(){ 
    console.log('Listening on 2000..') 
}); 

console.log(__dirname); 

app.get('/', (req, res) => { 
    res.sendFile(__dirname + '/dist/culture/index.html'); 
}); 

额外验证点 #

• 确认你的base href配置：你的src/index.html和dist/index.html里的<base href="/">是正确的，不需要修改，这样Angular的资源路径会以根目录为基准，和我们配置的静态目录匹配。
• 重启Express服务：修改配置后一定要重启server，确保新的静态目录配置生效。

这样修改后，浏览器请求静态资源时，Express就会去dist/culture目录下查找，就能正确加载main、styles等文件了。

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