wake-up-neo.com

Wenn ich meine Website aktualisiere, bekomme ich eine 404. Dies ist mit Angular2 und Firebase

Wenn ich meine Website aktualisiere, bekomme ich eine 404. Dies ist mit Angular2, TypeScript und Firebase.

Ich habe mit meiner Angular2-App für Firebaseapp bereitgestellt.

Die Routen scheinen sich in Ordnung zu ändern, aber wenn ich den Browser aktualisiere, wird er auf die 404-Seite umgeleitet.

Wenn ich lokal aktualisiere, passiert dies nicht.

Fehlen mir irgendwelche Routeneinstellungen oder Firebase-Einstellungen?

Dies ist meine firebase.json-Datei:

 {
   "firebase": "test",
   "public": "src",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ]
 }
21
AngularM

Für Firebase Hosting finden Sie die Dokumentation zu Umleitungen und Umschreibungen hier: https://www.firebase.com/docs/hosting/guide/url-redirects-rewrites.html

Von dort:

Verwenden Sie eine Umschreibung, wenn Sie denselben Inhalt für mehrere URLs anzeigen möchten. Umschreibungen sind besonders nützlich bei der Mustererkennung, da Sie jede URL akzeptieren können, die dem Muster entspricht, und den clientseitigen Code entscheiden lassen, was angezeigt werden soll.

Sie suchen wahrscheinlich nach dem ersten Überschreibungsbeispiel auf dieser Seite:

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

Dies ist eine Anweisung für den Webserver, /index.html für eingehende Anfragen zu liefern, unabhängig vom Pfad.

18

Ich denke, Sie verwenden den Standardmodus des Angular2-Routings (d. H. HTML5LocationStrategy). In diesem Fall benötigen Sie eine Konfiguration auf Ihrem Webserver, um den index.html (Ihre Einstiegspunktdatei) für jede URL, die den jeweiligen Routen entspricht, zu laden.

Wenn Sie zum HashBang-Ansatz wechseln möchten, müssen Sie diese Konfiguration verwenden:

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}
]);

In diesem Fall wird die Seite beim Aktualisieren erneut angezeigt.

Ich hoffe, es hilft dir. Thierry

19

Ich hatte das gleiche Problem bei der Produktion ... Die folgenden Schritte halfen mir, das Problem zu beheben.

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

und es wechselt zu HashLocationStrategy . Angular documentatation

Hoffe es wird jemandem helfen !!

4
Viktor Hardubej

Um auf die akzeptierte Antwort einzugehen, wollte ich zeigen, dass die Umschreibungsregeln inside der Hostingregeln gelten. in der firebase.json

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

Firebase hat auch eine aktualisierte Dokumentseite von der das obige Beispiel stammt. 

Ich wurde auch von der Hash-Frage (#) um diese herum geworfen. Ich habe festgestellt, dass dies nicht für den neuen Angular gilt. Durch diese kleinen Änderungen in der Datei firebase.json, das Neuerstellen, das Veröffentlichen in Firebase und das anschließende Aktualisieren einer Seite mit Clear-Cache wurde mein 404-Problem sofort behoben, und es wurden keine Problemumgehungen für Hashes in der URL erforderlich.

1
SeanKPS