Angular项目部署至GitHub.io后路由出现404问题求助

这问题是GitHub Pages的静态服务器特性导致的——Angular默认用HTML5模式路由，直接访问子路由时，服务器会尝试找对应路径的文件，但打包后的Angular项目只有根目录的index.html，所以返回404。给你两种可行的解决方法：

方法一：启用Hash模式路由（最简单） #

修改你的路由配置模块，在forRoot方法里添加useHash: true参数，让路由通过哈希值定位：

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

之后你的路由会变成https://danhass.github.io/#/google，这种方式下所有请求都会指向根目录的index.html，Angular会解析哈希值加载对应组件，完美适配GitHub Pages。

方法二：保留HTML5模式（无哈希路由） #

如果不想用哈希路由，需要做两步配置：

1. 在项目的index.html头部添加一段脚本，处理GitHub Pages的404重定向：

<script>
  (function(l) {
    if (l.search) {
      const q = {};
      l.search.slice(1).split('&').forEach(v => {
        const a = v.split('=');
        q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
      });
      if (q.p !== undefined) {
        window.history.replaceState(null, null, l.pathname.slice(0, -1) + (q.p || '') + (q.q ? ('?' + q.q) : '') + l.hash);
      }
    }
  }(window.location));
</script>

2. 执行正确的打包命令：

ng build --prod --base-href="/"

打包完成后，把dist目录里的index.html复制一份改名为404.html，再将整个dist目录内容上传到GitHub Pages。当访问子路由出现404时，GitHub Pages会返回404.html，这段脚本会自动修正路由路径，让Angular正确加载对应组件。

另外确认下base-href的设置，你的项目部署在根域名danhass.github.io，所以--base-href="/"是正确的，之前如果设错路径也会导致路由问题。

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