Github Pages not recognizing Angular routing

Question

I have a test Angular18 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
];

What is working and what is not working? could you please elaborate more? — Ramesh Rajendran
– Ramesh Rajendran, Commented Dec 4, 2024 at 5:00
The home page works, while the about page does not work. Precisely, it seems like the 404.html runs when cherryleh.github.io/angular-page/about is accessed and the routing is not acknowledged or found in my app. — hoshijun
– hoshijun, Commented Dec 4, 2024 at 5:12

Ramesh Rajendran · Accepted Answer · 2024-12-04 05:43:08Z

0

Try to add <base href="/angular-page/"> in your main.html file

answered Dec 4, 2024 at 5:43

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hoshijun Dec 4, 2024 at 6:03

Hi Ramesh. I added it to my index.html, but unfortunately nothing has changed. It is also worth noting that the app is deployed to my gh-pages branch, where index.html already had the snippet <base href="/angular-page/"> as well

Collectives™ on Stack Overflow

Github Pages not recognizing Angular routing

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related