Github 页面无法识别 Angular 路由

Question

我有一个托管在 Github Pages 上的测试 Angular18 网站。我有一个“关于”页面，可以在本地主机上完美运行，但返回时显示 404 未找到。我按照许多帖子中的建议创建了一个 404.html 文件，但它只导致了空白屏幕。我添加了调试代码以在控制台中记录路由，但没有任何结果。为什么 Github Pages 无法识别我的不同路线？

主.yml

name: Deploy Angular to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Build the Angular app
        run: npm run build -- --output-path=dist/angular-page --base-href="/angular-page/"

      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: dist/angular-page/browser  # Corrected the folder path
          branch: gh-pages
          token: ${{ secrets.GITHUB_TOKEN }}  # Use default GITHUB_TOKEN unless using custom

app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

export const routes: Routes = [
  { path: '', component: HomeComponent }, // Root route displays Home
  { path: 'about', component: AboutComponent }, // About route
  { path: '**', redirectTo: '' } // Wildcard route redirects to Home
];

Answer 1

尝试在您的

<base href="/angular-page/">

文件中添加

main.html