Deploy Angular 7 to github pages

Question

I have a simple angular7 app that has only two routes the main the 'article'. It works if you test it locally but when you put on github pages it just loads the page's css. I deployed following the angular documentation at the documentation and I also tried with the gh-pages tool. But none of them worked. If I remove my routes it would work.

This is the error I'm getting on the console.

1 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'blogfolio'
Error: Cannot match any routes. URL Segment: 'blogfolio'
    at t.noMatchError (main.5443131190bc79920d7b.js:1)
    at e.selector (main.5443131190bc79920d7b.js:1)
  ............

rodnorm.github.io/:1 Failed to load resource: the server responded with a status of 404 () 

This is my code:

app.rounting.ts

import { MainComponent } from './main/main.component';
import { ArticleComponent } from './article/article.component';    
import { Routes } from "@angular/router";

export const routes: Routes = [

    {
        path: '', component: MainComponent
    },
    {
        path: 'article', component: ArticleComponent
    }
];

This is inside articleList.component.html

<div class="post-preview" [routerLink]="['/article']">

This is the app.routing.module

import { routes } from './app.routing';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

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

If you guys want to check the whole code here it the repo and here is the deploy link.

Answer 1

If you have router in your Angular application then it will not be available in GitHub pages and you’ll get a 404 page.

To solve this, you need to tell the server that what needs to be done when page not found, so make a copy of the index.html file and rename it to 404.html. This ensures that all the routes which are not found will be rerouted to the Angular router and it will handle this correctly.

Please refer this for more info. Thanks!