Search code examples
javascriptangulartypescriptgithub-pagesangular-cli-ghpages

I worked on a tutorial application and I followed a guide to host it on gh-pages. Why is the routing messed up now?

Source code for app: https://github.com/shardul-shah/first-angular-app

It works on gh-pages... kind of (https://shardul-shah.github.io/first-angular-app/)

Problems:

  1. When going to this, https://shardul-shah.github.io/first-angular-app/ , the URL automatically changes to https://shardul-shah.github.io/first-angular-app/first-angular-app/
  2. Refresh of https://shardul-shah.github.io/first-angular-app/first-angular-app/ (or any refresh for that matter on any route) leads to white, empty screen.
  3. The app works when I click "my store" in https://shardul-shah.github.io/first-angular-app/first-angular-app/ , but not without that.

I saw the JS console, and I see I am getting problems with the route as well. I can see there are problems with the routing, but I can't for the life of me figure out how to fix it. I already tried 4 times to rebuild and reserve using ng and ng's gh-pages command line utility, but it didn't fix it. My inexperience with Angular and routing in it is hurting.

Can anyone please tell me how to fix this routing so the app behaves like normal and works from https://shardul-shah.github.io/first-angular-app/ ?

FYI, it works on stackblitz, where I originally worked on the app: https://angular-n2rqei.stackblitz.io and https://stackblitz.com/edit/angular-n2rqei?file=src/app/app.module.ts

Thanks! GitHub settings (pages)

Solution

  • Solutions : Solution for 1st problem :

    1. You might add one more folder in src/index.html in base. that's why it is load all routes after this url. (check screenshot) [Use ./ in base instead of github folder or anything else]

    enter image description here

    Solution for 2nd Problem :

    1. Refresh on any routes gets page blank white screen. it's because of you are not using useHashStretegy in your angular.

    2. You have to use useHash stretegy in your angular application like :

      RouterModule.forRoot(routes, { useHash: true })

    In your case like this :

    RouterModule.forRoot([
  { path: '', component: ProductListComponent },
  { path: 'products/:productId', component: ProductDetailsComponent },
  { path: 'cart', component: CartComponent },
  { path: 'shipping', component: ShippingComponent }
], { useHash: true })

    Note : If you don't want Hash(#) in your url, then you have to setup .htaccess file that can redirect(Rewrite URL) all request into angular build's index.html file. but that is not allows by github so you have to use dedicated server for that. More info about rewrite rule is here : server configuration

    More info about it on this link : https://medium.com/@dao.houssene/angular-the-hash-trap-b2d415c2c241

    solution for 3rd problem

    I hope so if your first two problem will fix then third will be automatically fixed.

    Note:

    I have also setup this kind of page on github using angular. you can checkout my code and repo. form this package : https://www.npmjs.com/package/rotate-control