Angular 8 部署到 Github 页面后出现奇怪的路由问题

Question

这个应用程序在本地运行良好，在我将它分解到 Github 页面后，一切似乎都很好，表单工作，API 工作，按钮工作......但是，每次我刷新页面时，我都会得到一个 404 页面（除了主页不知何故），然后如果我点击导航栏上的标志，它应该重定向回主页，而不是我得到了 404 页面。

Image of home page

---

我在构建应用程序时遇到了 base-href 问题，我尝试了 web 上的不同解决方案，将 base-href 设置为以下内容：angularTest、“/angularTest”、“/angularTest/”或 Angular 文档建议的“@987654322 @" 之类的，部署到 github 页面时都出现空白页，控制台出现 404 错误，这是唯一可行的方法：

ng build --prod --base-href=""

顺便说一下，项目名称是angularTest。

有人知道如何解决这个问题吗？非常感谢！

已部署应用的链接：https://nay-said.github.io/angularTest/

---

app.component.html:

   <nav class="navbar navbar-dark bg-dark navbar-expand-md">
    <a href="/" class="navbar-brand ml-5">
        <h3>Angular Demo</h3>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" 
             aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a routerLink="form" routerLinkActive="active" class="nav-link text-white"><h6>Form</h6></a>
            </li>
            <li class="nav-item">
                <a routerLink="/listings" routerLinkActive="active" class="nav-link text-white"><h6>Listings</h6></a>
            </li>
            <li class="nav-item">
                <a routerLink="/calendar" routerLinkActive="active" class="nav-link text-white"><h6>Calendar</h6></a>
            </li>
        </ul>
    </div>
</nav>
<div class="container">
    <router-outlet></router-outlet>
</div>

路线：

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'angularTest', component: HomeComponent},
  { path: 'form', component: ContactUsComponent},
  { path: 'listings', component: ListingsComponent},
  { path: 'calendar', component: CalenderComponent},
]

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes),
    CommonModule
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }
export const routingComponents = [
  HomeComponent, 
  ContactUsComponent, 
  ListingsComponent,
  CalenderComponent
]

Answer 1

正如 Angular 文档中关于在 github 页面上部署应用程序 here 中所述

When the build is complete, make a copy of docs/index.html and name it docs/404.html.

这对我有用！