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

【问题标题】：404 file not found when reloading an angular SPA published on github page重新加载在 github 页面上发布的 Angular SPA 时找不到 404 文件
【发布时间】：2018-12-03 20:11:52
【问题描述】：

我在重新加载在 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

【问题讨论】：

stackoverflow.com/questions/35038155/… 的可能副本
angular.io/guide/…
我已经用过 location / { try_files $uri $uri/ /index.html;但是重新加载问题是在 github 页面而不是子域上。
在子域中的问题是路由不起作用，检查我提供的链接
点击我发布的链接。它告诉您在 github 页面上让路由正常工作（不使用哈希策略）的唯一方法是定义 404 页面。 nginx 完全不相关：github pages 不使用 nginx，即使使用，也无法更改其配置。

标签： angular nginx github github-pages ng-build

【解决方案1】：

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

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

而不是

imports: [RouterModule.forRoot(routes)]

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

【讨论】：