GitHub製品のAngularウェブサイトを展開するエラー

Question

GitHub Linkに小さな静的角度のウェブサイトを導入しましたが、問題が1つあります。商品ページを更新するときlike thisそれから404エラーが発生します。

私がホームページからいずれかの製品のページに移動するときしかし、その後の製品ページが正しく表示されます。

このアプリケーションのreprositoryリンクは - hereです。

私は初心者です - どうしてそうしているのか教えてください。

Answer 1

これは、ブラウザからリフレッシュするときにブラウザがルーティングされたページのリクエストをGithubに送信するために、ロケーション戦略としてHTML pushStateを使用しているためです。 Githubがこの内部ルーティングに気づいていないので、それは404エラーを示しています。

解決策がいくつかあります：
1. Githubに固執する場合は、HashBased location strategyに移動する必要があります。それは単にあなたの問題を解決します。
2. Githubに依存していない場合は、htaccessファイルやその他の代替メカニズムの作成をサポートする他のサーバー（firebaseまたはapache）に移動できます。 （See this link for more info）。このhtaccessファイルは残念ながらまだGithubによってサポートされていません。私は個人的にこれらの不具合のためにfirebaseを好む。

これらのフォールバックメカニズムとは、サーバーが404ルートの場合のindex.htmlすなわちメインHTMLファイルへのリダイレクトを意味します。

Answer 2

私は同じ問題がありました。あなたはここで見つけるlocationHashStrategyを使用するか：https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles

をしかし、その後、あなたのURLは次のように追加＃必要があります：あなたは.htaccessファイルを追加することが必要であることしたいとのindex.htmlにすべてを書き換えない場合http://yourdomain.com/#/products

を。

<IfModule mod_rewrite.c> 
    RewriteEngine On 
    RewriteBase/

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

これは、index.htmlと同じフォルダに.htaccessとして保存します。