重新加载在 github 页面上发布的 Angular SPA 时找不到 404 文件

Question

重新加载发布在 gh 页面上的 angular 应用程序时，我收到错误消息。错误是：

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

我已经使用 ng build --prod 构建了我的应用程序。

Github 存储库： https : //github.com/chirag299051/IceAndFire

Github 页面： https : //chirag299051.github.io/IceAndFire/

我的 app.module.ts 文件包含：

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 { }

在我的子域上，当我单击任何链接时，我的路由不起作用，我已使用 nginx 进行部署。

子域：got.chirag9.com

Answer 1

在 app-routing.module.ts 文件中使用

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

代替

imports: [RouterModule.forRoot(routes)]

这里我们必须通过useHash: true在 URL 中启用哈希字符。此选项将有助于防止 GitHub 页面中的重新加载问题。