Angular项目build后通过angular-http-server访问仅显示空白页如何解决

调试前置步骤 #

首先打开浏览器开发者工具，切换到「控制台(Console)」面板，查看是否存在资源加载404、脚本执行报错信息，报错内容可直接定位绝大多数问题根源。

常见问题及解决方案 #

• base href 配置错误
  Angular 默认构建的资源路径为绝对路径/，如果启动服务的根目录不是构建产物所在的dist/[项目名]目录，会导致JS、CSS等资源加载失败。
  修复方案：

  1. 构建时指定相对路径：ng build --base-href ./
  2. 启动服务前先切换到dist/[项目名]目录，再执行angular-http-server命令

• HTML5路由模式未配置回退
  如果你使用了不带#的PathLocation路由模式，需要给angular-http-server开启SPA回退配置，否则非首页路由访问会触发404导致空白。
  修复方案：启动时添加spa参数：angular-http-server --spa

• 生产构建优化导致的兼容问题
  可先打开发环境构建包排查是否为生产构建压缩、Tree Shaking等优化步骤导致的运行错误：
  执行命令：ng build --configuration development，再启动服务验证是否正常。

• 服务启动路径错误
  检查终端启动时输出的serving path路径是否指向包含index.html、main.*.js等文件的最终构建产物目录，不要直接在项目根目录指向dist父级启动服务。

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