Github Pages not recognizing Angular routing

I have a test Angular website hosted on Github Pages. I have an About page that works perfectly on my localhost, but came back as 404 not found. I created a 404.html file as suggested in many posts, but it has only led to a blank screen instead. I added debugging code to log the route in console and nothing comes up. Why is Github Pages not recognizing my different routes?

Main.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
];

Continue reading...