Column

プログラミング
[Angular]デプロイしたサイトで更新ボタンを押すと404ページへ遷移してしまう問題
2023.01.04

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 TasksHashLocationStrategy