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.
I found what was happening!
Inside my /docs/index.html there was a base href that was given on the moment I ran the
ng build --prod --base-href <nameHere>
was not a relative url. I had to add // in this index.html file to the base href this is how it looks like:
<base href="/blogfolio/">
This made it work. I know a good answer would be adding the '/blogfolio/' to the ng build href but that doesn't seem to work as well.
There's a PR about that here.
Thanks for everything, guys!