部署在GitHub Pages的Angular项目刷新路由失效求助

1. 配置正确的基础路径 #

你的问题核心是刷新后资源路径丢失了仓库子路径，这是Angular部署到GitHub Pages子路径时的典型问题，必须指定正确的基础路径：

• 编辑angular.json，找到projects -> [你的项目名] -> architect -> build -> options，添加或修改以下配置：

"baseHref": "/praktanchatrabharati-ssvnk/",
"deployUrl": "/praktanchatrabharati-ssvnk/"

• 或者直接在构建命令里指定，避免修改配置文件：

ng build --prod --base-href="/praktanchatrabharati-ssvnk/" --deploy-url="/praktanchatrabharati-ssvnk/"

2. 检查index.html的基础标签 #

确保src/index.html里的<base href>和上面的配置一致，构建后Angular会自动替换，但手动确认更保险：

<base href="/praktanchatrabharati-ssvnk/">

3. 切换路由到Hash模式（解决刷新路由404） #

GitHub Pages是静态托管服务，不支持Angular默认的HTML5路由模式，刷新非首页路由会触发404。改成Hash模式就能解决：
打开app-routing.module.ts，在路由配置里添加useHash: true：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

之后路由会变成带#的格式，比如https://nayan-jyoti.github.io/praktanchatrabharati-ssvnk/#/about，刷新时不会再返回404。

4. 用工具简化部署（可选） #

推荐使用angular-cli-ghpages工具，它会自动处理基础路径等配置，避免手动出错：

# 全局安装工具
npm install -g angular-cli-ghpages
# 构建项目
ng build --prod --base-href="/praktanchatrabharati-ssvnk/"
# 部署到GitHub Pages
ngh --dir=dist/[你的项目文件夹名]

5. 清理缓存重新构建 #

如果之前的构建缓存导致配置不生效，先清理再构建：

ng clean
ng build --prod --base-href="/praktanchatrabharati-ssvnk/" --deploy-url="/praktanchatrabharati-ssvnk/"

完成以上步骤后重新部署，刷新页面时资源路径就会正确指向子路径，路由刷新也不会出现404了。

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