Angular7中base href带末尾斜杠时ng serve无法加载页面如何解决

可行解决方案 #

你可以通过ng serve内置参数直接覆盖index.html中的base href配置，无需修改业务代码，具体操作如下：

• 单次启动生效：执行启动命令时追加--base-href参数即可，参数优先级高于页面内写死的<base>标签配置：

  ng serve --port 你的自定义端口 --base-href /example
  

• 本地开发永久生效：不用改业务代码，仅修改项目本地的Angular配置即可：
  打开angular.json配置文件，找到对应项目的projects > 你的项目名 > architect > serve > options节点，新增配置项：

  "baseHref": "/example"
  

  后续直接执行ng serve就会自动应用该配置，无需每次手动加参数。

问题原因说明 #

你遇到的空白问题是Angular CLI开发服务器的路径匹配逻辑导致的：
当<base href="/example/">带末尾斜杠时，开发服务器拼接静态资源路径会生成/example//runtime.js这类带双斜杠的异常路径，dev server无法识别该路径会返回404，所以页面空白；去掉末尾斜杠后拼接的路径为/example/runtime.js符合匹配规则，就能正常加载。

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