Angularのデプロイしたサイトで更新ボタンを押すと404ページへ遷移してしまう問題を解決する方法を紹介します。
Angularのプロジェクトのapp-routing.module.ts
の11行目に{ useHash: true }
を追記してください。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SignInComponent } from './components/authentications/sign-in/sign-in.component';
import { DashboardComponent } from './components/pages/dashboard/dashboard.component';
const routes: Routes = [
{ path: '', redirectTo: '/sign-in', pathMatch: 'full' },
{ path: 'sign-in', component: SignInComponent },
{ path: 'dashboard', component: DashboardComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes,{ useHash: true })],
exports: [RouterModule],
})
export class AppRoutingModule { }
URLの間に/#/が入ってしまいますが、更新ボタンやF5を押したとしても同じページに遷移することが出来ます。
(参考:Common Routing Tasks、HashLocationStrategy)