部署于Github Pages的Angular 18路由不识别问题求助

问题根源 #

GitHub Pages是静态文件托管服务，默认不支持单页应用（SPA）的HTML5路由（即Angular默认的PathLocationStrategy）。当直接访问/angular-page/about这类子路由时，服务器会尝试寻找对应的物理文件，找不到就返回404。你添加404.html后页面空白，是因为该文件没有加载Angular应用的核心资源，也没有把请求路由交给Angular处理，导致应用完全未初始化。

解决方案 #

1. 创建正确的404.html文件

直接复制项目根目录的index.html内容到404.html，确保两个文件完全一致。这样当服务器返回404时，会加载和首页相同的Angular应用资源，之后Angular就能接管路由逻辑。

2. 确保404.html被部署到GitHub Pages

修改你的GitHub Actions配置（main.yml），在build步骤后添加复制404.html到dist目录的命令：

- name: Copy 404.html to dist folder
  run: cp 404.html dist/angular-page/browser/

这样部署时，404.html会和其他应用文件一起上传到gh-pages分支。

3. 验证路由与基础路径配置

你的app.routes.ts配置是正确的，同时确认build命令中的--base-href="/angular-page/"已经正确设置（你的配置里已经做了这一步，无需修改）。Angular 18默认启用PathLocationStrategy，无需额外配置，但可以在app.config.ts中确认：

import { ApplicationConfig, provideRouter } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes), // 默认使用PathLocationStrategy
    provideClientHydration()
  ]
};

4. 清除浏览器缓存

部署完成后，按Ctrl+Shift+R强制刷新页面，避免缓存旧文件导致的异常。

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