3

I am recieving error when reloading my angular application published on gh pages. The error is: 

404
File not found.
The site configured at this address does not contain the requested file.

I have built my app using ng build --prod.

Github repo: https://github.com/chirag299051/IceAndFire

Github page: https://chirag299051.github.io/IceAndFire/

My app.module.ts file contains:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

import { RouterModule, Routes } from '@angular/router';
import { BookDetailsComponent } from './book-details/book- 
details.component';
import { CharDetailsComponent } from './char-details/char- 
details.component';
import { HouseDetailsComponent } from './house-details/house- 
details.component';
import { GotService } from './got.service';
import { GotHttpService } from './got-http.service';

import { HttpClientModule, HttpClient } from '@angular/common/http';

@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
BookDetailsComponent,
CharDetailsComponent,
HouseDetailsComponent
],
imports: [
HttpClientModule,
BrowserModule,
RouterModule.forRoot([
  {path: 'home', component: HomeComponent},
  {path:'',redirectTo:'home',pathMatch:'full'},
  {path: 'about', component: AboutComponent},
  {path: 'book/:name',component : BookDetailsComponent},
  {path: 'char/:url',component : CharDetailsComponent},
  {path: 'house/:name',component : HouseDetailsComponent}
])
],
providers: [GotService,GotHttpService,HttpClient],
bootstrap: [AppComponent]
})
export class AppModule { }

And on my subdomain my routes are not working when i click on any links, i have deployed using nginx.

Subdomain : got.chirag9.com

chirag
  • 95
  • 1
  • 7
  • possible duplicate of https://stackoverflow.com/questions/35038155/how-to-redirect-all-angular-request-to-index-html-in-nginx – Guerric P Jun 25 '18 at 09:36
  • https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml – JB Nizet Jun 25 '18 at 09:43
  • i have already used location / { try_files $uri $uri/ /index.html; } But reloading problem is on github page not subdomain. – chirag Jun 25 '18 at 10:22
  • In subdomain the problem is routes are not working, check the links i provided – chirag Jun 25 '18 at 10:23
  • Click the link I posted. It tells you that the only way to have routes working (without using the hash strategy) on github pages is to define a 404 page. nginx is completely irrelevant: github pages doesn't use nginx, and even if it does, you can't alter its configuration. – JB Nizet Jun 25 '18 at 11:35

1 Answers1

7

In app-routing.module.ts file use

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

instead of 

imports: [RouterModule.forRoot(routes)]

Here we have to pass useHash: true to enable hash character in URL. This option will help to prevent the reload issue in GitHub pages.

Andronicus
  • 25,419
  • 17
  • 47
  • 88
Puskal
  • 71
  • 1
  • 3