Quand je rafraîchis mon site web Je reçois un 404. C'est avec Angular2 et firebase
quand je rafraîchis mon site je reçois un 404. C'est avec Angular2, typescript et firebase.
j'ai été déployé à firebaseapp avec mon application Angular2.
les Routes semblent bien changer mais quand je rafraîchis le navigateur il me redirige à la page 404.
quand je me rafraîchis localement cela n'arrive pas.
est-ce que je manque des réglages de route ou de Firebase?
C'est ma base.dossier json:
{
"firebase": "test",
"public": "src",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
4 réponses
pour Firebase hébergeant la documentation sur les redirections et les réécritures est ici: https://www.firebase.com/docs/hosting/guide/url-redirects-rewrites.html
de là:
utilisez une réécriture lorsque vous voulez afficher le même contenu pour plusieurs URLs. 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 faire. afficher.
vous êtes probablement à la recherche de la première réécriture échantillon sur cette page:
rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
il s'agit d'une instruction pour le serveur web de servir /index.html pour toute requête entrante, quel que soit le chemin.
je pense que vous utilisez le mode par défaut de routage Angular2 (i.e. HTML5LocationStrategy ). Dans ce cas, vous avez besoin d'une configuration sur votre serveur web pour charger le index.html (votre fichier point d'entrée) pour chaque URL correspondant à chaque route.
si vous voulez 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 actualisez la page, elle s'affiche de nouveau.
J'espère que ça vous aidera, Thierry
j'ai eu le même problème sur la production. Les étapes suivantes m'a aidé à résoudre le problème. Vous devez ajouter dans votre module root suivant:
imports: [RouterModule.forRoot(routes, {useHash: true})]
et il swich à HashLocationStrategy. documentation angulaire
j'Espère que ça aidera quelqu'un !!
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 aussi un page docs mise à jour où l'exemple ci-dessus est de.
aussi, j'ai été éjecté par la question hash (#) autour de cela. J'ai trouvé que ça ne s'applique pas au nouvel angle. Faire ces petits changements dans la base de feu.json, la reconstruction, la publication à firebase, puis la réalisation d'une page de rafraîchissement avec Clear-cache ont immédiatement résolu mon problème 404 avec aucune solution de rechange requise pour les hashs dans L'URL.