2

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.

Gonçalo Peres
  • 11,752
  • 3
  • 54
  • 83
Rodrigo Normando
  • 23
  • 2
  • 5
  • You possibly should be using `pathMatch: 'full'` for the empty ('') path and have a wild card path as your last one (to match non-existent paths), as you may see [here](https://angular.io/guide/router#configuration) – GCSDC Dec 04 '18 at 21:26

4 Answers4

5

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!

Abhinav Saxena
  • 3,384
  • 1
  • 11
  • 7
  • Great point, that made me understand why the step in the tutorial on the official [Angular doc](https://angular.io/guide/deployment#deploy-to-github-pages) is necessary to copy `index.html` to `404.html`, although it feels a little bit hacky – quizmaster987 Jan 30 '21 at 17:45
  • This answer is useful, but the most useful part--the actual *fix*--is behind a link that is now dead. -1 – scohe001 Apr 11 '22 at 12:39
  • I assumed that Angular official page will always be there and was no benefit of copying and paste from there so I just put the link, sadly its gone but please let me know in case of any issue, I'll try to solve that one. – Abhinav Saxena Jul 24 '23 at 15:33
  • In 404.html you need to update all of your as per directory hierarchy on GitHub repo. – Abhinav Saxena Jul 24 '23 at 15:35
1

Have you specified the base-href? I get a look to the repo and I didn't found it on project's configuration. Try to add baseHref in your configuration.

Just a fragment example of angular.json:

"outputPath": "wwwroot/dist",
"baseHref": "/dist/",
"deployUrl": "/dist/",
"index": "ClientApp/index.html",
"main": "ClientApp/main.ts",
"polyfills": "ClientApp/polyfills.ts",
"tsConfig": "ClientApp/tsconfig.app.json",
"assets": [
    "ClientApp/resources"
],
"styles": [
    "ClientApp/styles.scss"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

You can read this issue for more information.

xcesco
  • 4,690
  • 4
  • 34
  • 65
0

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!

Rodrigo Normando
  • 23
  • 2
  • 5
0

Just copy dist/index.html to dist/404.html https://angular.io/guide/deployment#deploy-to-github-pages

You can do in automatically:

  1. add js script (e.g. scripts/patch-build.js)
const fs = require('fs');

fs.copyFile('dist/index.html', 'dist/404.html', (err) => {
    if (err) {
        console.error('index.html -> 404.html copy failed:');
        throw err;
    }
});
  1. Update build command in package.json: change "build": "ng build" to "build": "ng build && node scripts/patch-build.js"
  2. Run npm run build. Done!
Sergey Andreev
  • 1
  • 1
  • 1