web-dev-qa-db-ja.com

ウェブサイトを更新すると、404が表示されます。これは、Angular2とfirebaseを使用した場合です

Webサイトを更新すると、404が表示されます。これは、Angular2、TypeScript、およびfirebaseで発生します。

Angular2アプリでfirebaseappにデプロイしました。

ルートはうまく変更されているように見えますが、ブラウザを更新すると、404ページにリダイレクトされます。

ローカルで更新すると、これは起こりません。

ルート設定またはFirebase設定がありませんか？

これは私のfirebase.jsonファイルです：

 {
   "firebase": "test",
   "public": "src",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ]
 }
typescriptfirebaseangularfirebase-securityfirebase-hosting
24
AngularM

Firebase Hostingのリダイレクトとリライトに関するドキュメントはこちらです： https://www.firebase.com/docs/hosting/guide/url-redirects-rewrites.html

そこから：

複数のURLに同じコンテンツを表示する場合は、書き換えを使用します。書き換えは、パターンマッチングで特に役立ちます。パターンに一致する任意のURLを受け入れて、クライアント側のコードに表示内容を決定させることができるためです。

そのページで最初の書き換えサンプルを探している可能性があります。

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

これは、Webサーバーが/index.htmlパスが何であれ、着信リクエストに対して。

24
Frank van Puffelen

Angular2ルーティングのデフォルトモード（つまり、HTML5LocationStrategy）。この場合、ウェブサーバーでindex.html（エントリポイントファイル）各ルートに対応する各URL。

HashBangアプローチに切り替える場合は、次の構成を使用する必要があります。

import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy, Location, HashLocationStrategy } from 'angular2/router'; 

import {MyApp} from './myapp';

bootstrap(MyApp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy}
]);

この場合、ページを更新すると、再び表示されます。

お役に立てばと思います、ティエリー

19
Thierry Templier

本番でも同じ問題がありました。次の手順は、問題を解決するのに役立ちました。次にルートモジュールを追加する必要があります。

imports: [RouterModule.forRoot(routes, {useHash: true})]

hashLocationStrategyに切り替えます。 角度の文書化

それが誰かを助けることを願っています!!

11
Viktor Hardubej

受け入れられた答えを拡張して、書き換えルールがホスティングルールのinsideに行くことを示したかったのです。 firebase.jsonで

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

また、Firebaseには 更新されたドキュメントページ があり、上記の例の元となっています。

また、私はこれに関するハッシュ（＃）の質問に投げ捨てられました。新しいAngularには当てはまらないことがわかりました。 firebase.jsonでこれらの小さな変更を行い、再構築し、firebaseに公開してから、ページをクリアキャッシュで更新すると、URLのハッシュに回避策を必要とせずに404問題がすぐに解決しました。

5
SeanMC