Angular CLI使用ng serve --serve-path配置路径后页面白屏怎么办

问题根因 #

页面空白是因为Angular应用默认的base href配置和你指定的--serve-path不匹配，导致js、css等静态资源加载路径错误，资源加载失败后应用无法正常渲染。

解决方案 #

方案1：单次启动临时指定（适合临时测试场景） #

执行启动命令时同时传入--base-href参数和--serve-path参数保持路径匹配即可：

ng serve --serve-path=/foobar --base-href=/foobar/

启动完成后直接访问localhost:4200/foobar就能正常加载应用。

方案2：固定配置到项目中（适合长期需要指定路径的场景） #

直接修改项目根目录下的angular.json配置文件，无需每次启动时加参数：

• 找到配置路径：projects > [你的项目名称] > architect > serve > options
• 在options段添加如下两项配置：

"servePath": "/foobar",
"baseHref": "/foobar/"

• 保存配置后直接执行ng serve即可生效。

排查注意点 #

如果配置后仍然白屏，打开浏览器开发者工具的「网络」标签页，确认静态资源的请求路径是否包含/foobar前缀：

• 如果请求路径缺少前缀，检查baseHref配置是否正确，确认末尾带斜杠
• 如果请求路径重复出现前缀，检查是否同时在index.html里硬编码了<base href>标签，和命令/配置的参数冲突，删除index.html里的硬编码配置即可

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