Angular应用部署到GitHub Pages后访问出现404错误如何解决？

• 检查构建配置的 base href 是否正确
  Angular 部署到 GitHub Pages 时，必须指定与仓库名匹配的 base 路径，你的仓库名为 Cards-Project，执行构建命令时需添加对应参数：
  ng build --base-href /Cards-Project/
  如果未配置该参数，资源文件的引用路径会出错，直接导致页面无法加载返回404。

• 检查 SPA 路由适配配置
  Angular 默认使用无 # 的 History 路由模式，GitHub Pages 本身不支持单页应用的路由重定向规则，直接访问子路由或刷新页面就会触发404，可选择两种方案修复：

  1. 改用 Hash 路由模式：在 app-routing.module.ts 的 RouterModule.forRoot 配置中添加 useHash: true 参数，路由会自动加上 # 前缀，适配静态服务器规则
  2. 新增 404.html 回退文件：将构建产物中的 index.html 内容完整复制一份，命名为 404.html 放在同一目录，所有 404 请求会自动回退到该文件，交由 Angular 路由处理

• 检查 GitHub Pages 发布配置

  1. 确认你上传的是 Angular 构建后的 dist 目录下的子目录内容，不要把整个 dist 文件夹上传，要确保发布分支的根目录或者指定的 docs 目录下直接存在 index.html 文件
  2. 进入仓库的 Settings → Pages 页面，确认 Source 配置的分支和目录正确：如果把构建产物放在 main 分支的 docs 文件夹下，就选 main 分支+docs 目录；如果是单独的 gh-pages 分支，就选 gh-pages 分支+/(root) 根目录
  3. 配置修改后需要等待 2-5 分钟生效，可打开浏览器隐身窗口访问测试，避免本地缓存影响判断

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