部署Angular应用到GitPages时路由及资源加载异常问题求助

必查配置项 #

• 不要手动修改构建后index.html的base href，请在构建时直接传入参数：
  执行构建命令时添加参数：ng build --base-href "/<org>/<repo>/"
  若使用angular-cli-ghpages部署，命令改为：npx angular-cli-ghpages --dir=dist/[你的项目构建产物目录名] --base-href "/<org>/<repo>/"
  手动修改构建后的文件不生效，是因为Angular构建阶段就已经生成了js、css等静态资源的硬编码路径，不会随base标签动态调整。
• 检查应用内部资源引用格式：
  所有资源引用不能以/开头的绝对路径书写（比如/assets/logo.png是错误写法），必须改为相对路径格式assets/logo.png，绝对路径会跳过base href规则直接指向域名根路径，导致路径缺失仓库前缀。
• 补充路由兼容配置：
  如果应用使用无#的HTML5路由模式，除了将index.html复制为404.html外，可在项目app.module.ts的providers数组中添加配置锁定基础路径：

  providers: [
    { provide: APP_BASE_HREF, useValue: '/<org>/<repo>/' }
  ]
  

• 确认GitHub Pages配置生效：
  检查仓库Pages设置中，发布源是否正确选择对应分支的docs/目录，企业版GitHub Pages可能存在最长10分钟的缓存周期，修改配置后可开启浏览器隐私模式访问验证，避免本地缓存干扰。

应用开发不符合要求的判定 #

如果以上配置全部正确仍然出现资源404，基本可判定是开发阶段的实现问题：比如代码中硬编码了根路径绝对地址、自定义了资源加载逻辑未适配base路径规则，需要前端开发人员配合调整代码。

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