部署Angular应用到gh-pages报No base href set错误如何解决？

问题原因 #

Github Pages默认的应用部署路径是https://<用户名>.github.io/<仓库名>/，而非域名根路径，你当前设置的<base href="/">指向的是根路径，Angular无法在该路径下匹配到资源，因此抛出未找到base href的报错。

解决方案 #

你可以任选以下一种方法修复：

• 方法1：构建时指定base-href参数（推荐）
  执行构建命令时增加参数，将路径替换为你的Github Pages仓库名，前后保留斜杠：

  ng build --output-path docs --base-href /<你的仓库名>/
  

  构建完成后将生成的docs文件夹内容推送到仓库，在仓库Pages设置中指定部署源为main分支的docs文件夹即可。
• 方法2：直接修改index.html的base标签
  将你现有index.html中的<base href="/">替换为：

  <base href="/<你的仓库名>/">
  

• 方法3：通过Angular依赖注入配置APP_BASE_HREF令牌
  先在app.module.ts中导入依赖：

  import { APP_BASE_HREF } from '@angular/common';
  

  再在@NgModule的providers数组中添加配置：

  providers: [
    { provide: APP_BASE_HREF, useValue: '/<你的仓库名>/' }
  ]
  

注意事项 #

如果你已经为该Github Pages绑定了自定义域名，可以保留<base href="/">配置，不需要做上述路径替换。

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