Brighten up your day !!

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

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

0

なぜ404エラーとなるのか

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

開発環境では出ない理由

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

APacheの場合

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

<pre class="wp-block-syntaxhighlighter-code">RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html</pre>

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

0

⭐️Brighten up your day with NP-Systems⭐️


  • GAEでPythonをデプロイする

    更新日時:2021年4月4日 21時17分

    0 2021年はPython37が良さそう.requirements.txtはpip3 listで表示されたものを書く. 0


  • Angular(Ionic)でHTTPリクエスト

    更新日時:2021年3月24日 18時23分

    0 AngularでバックエンドAPIへアクセスしてデータを取得する際、認証情報やクエリパラメータを付与したい時がある。 Post通信 Get通信 0


  • 3月15日AngularでAdsense

    更新日時:2021年3月15日 06時46分

    0 もう3月を中旬ですね。もう春ですね!Yoasobiに最高にハマっています。 昨日ようやくAngular(Ionic)でAdsenseを表示できるようになりました。 http://ocr-app.np-sys.com/…


  • GAEでPythonをデプロイする

    更新日時:2021年4月4日 21時17分

    0 2021年はPython37が良さそう.requirements.txtはpip3 listで表示されたものを書く. 0


  • Angular(Ionic)でHTTPリクエスト

    更新日時:2021年3月24日 18時23分

    0 AngularでバックエンドAPIへアクセスしてデータを取得する際、認証情報やクエリパラメータを付与したい時がある。 Post通信 Get通信 0


this is single-default.php