Angularで再読み込み時に404エラーがでる

なぜ404エラーとなるのか

AngularをはじめとするSPAでは、URLごとに実態のあるページが存在する一般的なサイトとは異なり、index.htmlをクライアント側で書き換えるため直接特定のアドレスにアクセスするとエラーがでます。

開発環境では出ない理由

開発環境だと開発サーバ側でindex.htmlを読み込んでくれているので問題にならないのですが、デプロイ時には自分で設定することになります。設定内容はファイルが見つからない時はindex.htmlを参照してくれというものですので、Angularではなくサーバ側のapacheやnginxなどの設定ということになります。なのでデプロイ時に顕在化する問題となります。

APacheの場合

.htaccessファイルに下記を指定します。サブドメインを使ってホスティングする場合、サブドメインのルート（サブドメインのindex.htmlのある場所）に下記を設置すればいいです。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . index.html [L]
</IfModule>

Nginxの場合

こちらのページ（Front Controller Pattern Web Apps）に記載されているtry_filesを使ってindex.htmlに対して下記を設定します

try_files $uri $uri/ /index.html;

Firebaseでホスティングする場合

rootにある設定ファイル（確かfirebase.jsonだったと記憶）を下記のように直せばいいです

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

その他の場合

IISやRubyの場合は公式を見ていただくのが良いかと思います。

https://angular.io/guide/deployment#server-configuration

その他

写真から文字情報を抽出して爆速でレポートや記事を作成するアプリを作成しています。無料なのでよかったらどうぞ。

iOS => https://apps.apple.com/app/id1497498494

Android => https://play.google.com/store/apps/details?id=com.rainbowsv2.ocr