这问题我太熟了！本质原因是Angular是单页应用（SPA），所有路由逻辑都是在前端浏览器层面处理的，但http-server这类纯静态服务器根本不知道这回事——当你刷新页面或者直接在地址栏输入某个路由路径时，服务器会傻乎乎地去磁盘上找对应路径的物理文件，自然找不到就返回404了。而ng serve是Angular官方的开发服务器，自带了路由重写的逻辑，所以开发环境下不会有这个问题。

下面给你几个实用的解决方案，按简单程度排序：

方案1：用http-server的代理参数自动重定向 #

http-server本身支持通过-P（或--proxy）参数，把所有找不到的请求都重定向到index.html，让Angular的前端路由来接管。

启动命令示例：

http-server dist/your-app-name -P http://localhost:8080?

注意事项：

• 替换dist/your-app-name为你实际的构建输出目录（比如dist/my-angular-app）
• 端口号8080要和http-server启动的端口保持一致，如果你用-p指定了其他端口，这里也要对应修改

方案2：复制index.html为404.html（快速trick） #

http-server有个默认行为：当遇到404错误时，会自动尝试加载根目录下的404.html文件。我们可以利用这个特性，直接把构建好的index.html复制一份改名为404.html：

步骤：

1. 先执行构建命令：ng build --prod（或者你常用的构建命令）
2. 进入构建输出目录，比如cd dist/your-app-name
3. 复制文件：
   • macOS/Linux：cp index.html 404.html
   • Windows：copy index.html 404.html
4. 再启动http-server：http-server dist/your-app-name

这样刷新时，服务器返回404后会加载404.html（其实就是Angular的入口文件），前端路由就能正常工作了。

方案3：换用支持SPA的静态服务器 #

如果觉得上面的方法不够优雅，推荐换用专门支持SPA的静态服务器，比如serve：

1. 先全局安装：npm install -g serve
2. 启动命令：

serve -s dist/your-app-name

-s参数就是告诉serve这是一个单页应用，它会自动把所有路由请求重定向到index.html，完美解决404问题，而且用法比http-server更省心。

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