Angular项目部署后从父项目跳转至子目录子项目出现白屏问题

1. 优先检查子项目的base href配置 #

这是该场景下最高发的问题原因，Angular会基于base href计算静态资源的加载路径，配置错误会导致资源加载失败白屏。

• 子项目打包时必须指定base href为子目录路径，打包命令如下：
  ng build --base-href /strategy/
• 也可以直接修改子项目index.htmlhead标签内的base标签：
  <base href="/strategy/">
  注意路径末尾的斜杠不能省略，否则相对路径计算会出现偏差

2. 调整父项目跳转子项目的实现方式 #

如果父项目使用Angular内部路由（router.navigate、routerLink）跳转子项目，路径会被父项目的路由模块捕获，父项目找不到匹配路由就会触发白屏，强制刷新时请求直接发送到服务器，返回子项目资源就可以正常加载。

• 父项目跳转子项目不要使用Angular内部路由，改用原生跳转逻辑：

// 逻辑跳转调用原生API
window.location.href = '/strategy';
<!-- 标签跳转直接用href属性，不要加routerLink -->
<a href="/strategy">跳转子项目</a>

3. 修正子项目的静态资源引用路径 #

子项目内如果存在/assets/xxx.png这类绝对路径引用的静态资源，会默认请求根目录下的资源，不会匹配子目录下的静态文件，触发资源加载报错。

• 所有静态资源引用改为相对路径格式：./assets/xxx.png
• 也可以在子项目angular.json中配置deployUrl为/strategy/，打包时会自动给所有资源路径加上子目录前缀

4. 确认服务器路径适配配置 #

如果以上配置都正确，需要确认服务器对/strategy/*路径的请求统一返回子项目的index.html，避免子项目内部路由匹配失败。以Nginx为例参考配置：

location /strategy {
alias /usr/share/nginx/html/strategy;
try_files $uri $uri/ /strategy/index.html;
}

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