Angular执行ng build构建后仅显示index.html空白页问题

ng serve 开发模式下会自动处理资源注入、路径代理，所以能正常加载，构建后出现空白、index.html仅保留标题的问题，基本由以下几个原因导致：

• base href 配置错误（最高发）
  Angular 构建和运行时完全依赖 index.html 里的 <base href> 标签解析所有JS、CSS资源和路由路径。如果配置值和实际部署的路径不匹配，浏览器就会请求不到核心脚本文件，自然没法渲染页面内容，打开控制台能看到大量静态资源404报错。
  比如你把构建产物部署在站点的 /admin/ 子目录下，但 base href 写的是根路径 /，或者部署在域名根目录却写了子路径，都会触发这个问题。构建时可以直接带参数指定正确路径：ng build --base-href /你的实际部署目录/，注意路径末尾必须带斜杠。
• 本地直接用file协议打开产物
  Angular 构建后的静态资源引用规则是适配HTTP/HTTPS服务的，直接双击index.html用file://协议打开时，浏览器会因为本地跨域安全策略拦截所有JS脚本的加载，必然显示空白。本地验证构建产物必须启动静态HTTP服务，比如执行npx serve dist/你的项目构建目录名启动服务后再访问，不能直接双击打开文件。
• 路由模式和托管规则不匹配
  Angular 默认用 HTML5 历史路由模式（PathLocationStrategy），这种模式要求托管服务器配置重写规则：所有路径的请求都要fallback到index.html，由Angular接管路由渲染。如果没配这个规则，不仅子路由访问会404，部分场景下首次加载也会因为路径解析失败出现空白。如果不想调整服务器配置，可以切换到哈希路由模式（HashLocationStrategy），路由地址带#标识，不需要服务器额外支持。
• 构建配置异常导致资源未注入
  如果手动修改过angular.json里的构建配置，误关了index文件的资源注入选项，或者自定义index.html时删掉了<app-root>根组件标签、构建时自动注入脚本的相关占位，也会导致最终生成的index.html没有引入核心运行脚本，渲染空白。可以先执行ng build --configuration production --verbose查看构建日志，对照默认配置排查修改项即可。

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