web-dev-qa-db-fra.com

Quand j'actualise mon site, je reçois un 404. C'est avec Angular2 et firebase

Lorsque j'actualise mon site Web, je reçois un 404. C'est avec Angular2, TypeScript et Firebase.

J'ai déployé Firebaseapp avec mon application Angular2.

Les itinéraires semblent bien changer, mais lorsque je rafraîchit le navigateur, il me redirige vers la page 404.

Cela ne se produit pas lorsque j'actualise localement.

Me manque-t-il des paramètres de route ou de Firebase?

Ceci est mon fichier firebase.json: 

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

Pour Firebase Hosting, la documentation sur les redirections et réécritures est disponible à l’adresse: https://www.firebase.com/docs/hosting/guide/url-redirects-rewrites.html

De là:

Utilisez une réécriture lorsque vous souhaitez afficher le même contenu pour plusieurs URL. Les réécritures sont particulièrement utiles avec la correspondance de modèle, car vous pouvez accepter n'importe quelle URL qui correspond au modèle et laisser le code côté client décider quoi afficher.

Vous êtes probablement à la recherche du premier exemple de réécriture sur cette page:

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

Ceci est une instruction pour que le serveur Web serve /index.html pour toute demande entrante, quel que soit le chemin d'accès.

18
Frank van Puffelen

Je pense que vous utilisez le mode par défaut de routage Angular2 (c'est-à-dire HTML5LocationStrategy). Dans ce cas, vous avez besoin d’une configuration sur votre serveur Web pour charger le index.html (votre fichier de point d’entrée) pour chaque URL correspondant à chaque route.

Si vous souhaitez passer à l'approche HashBang, vous devez utiliser cette configuration:

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

Dans ce cas, lorsque vous actualiserez la page, elle sera affichée à nouveau.

J'espère que ça vous aide, Thierry

19
Thierry Templier

J'ai eu le même problème sur la production . Les étapes suivantes m'ont aidé à résoudre le problème .

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

et il passera à HashLocationStrategy . Documentation angulaire

J'espère que ça va aider quelqu'un !!

4
Viktor Hardubej

En développant la réponse acceptée, je voulais montrer que les règles de réécriture vont à l'intérieur des règles d'hébergement. dans le firebase.json

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

Firebase a également une page de documentation mise à jour d'où provient l'exemple ci-dessus. 

De plus, la question sur le hash (#) m'a émerveillé. J'ai trouvé que cela ne s'applique pas au nouvel angulaire. Les modifications mineures apportées à firebase.json, la reconstruction, la publication sur firebase, puis la création d'une page d'actualisation avec clear-cache ont immédiatement résolu mon problème 404 sans qu'aucune solution de contournement ne soit requise pour les hachages dans l'URL.

1
SeanKPS