Quand je rafraîchis mon site Web, je reçois un 404. C'est avec Angular2 et Firebase

Lorsque j'actualise mon site, j'obtiens une erreur 404. C'est avec Angular2, tapuscrit et firebase.

J'ai déployé à firebaseapp avec mon Angular2 app.

Routes semblent changer bien, mais quand j'ai actualiser le navigateur, il me redirige vers la page d'erreur 404.

Lorsque j'actualise au niveau local, cela n'arrive pas.

Suis-je manque des paramètres de l'itinéraire ou de Firebase paramètres?

C'est mon firebase.fichier json:

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

source d'informationauteur AngularM

  1. 14

    Pour Firebase d'Hébergement de la documentation sur les redirections et les réécrit ici: https://www.firebase.com/docs/hosting/guide/url-redirects-rewrites.html

    À partir de là:

    Utiliser une réécriture lorsque vous souhaitez afficher le même contenu pour plusieurs URLs. Réécrit sont particulièrement utiles avec la correspondance de modèle, comme vous pouvez accepter toutes les URL qui correspond au modèle et de laisser le code côté client décider des éléments à afficher.

    Vous êtes probablement à la recherche pour la première réécriture de l'échantillon sur la page:

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

    C'est une instruction du serveur web de servir /index.html pour toute demande entrante, quelle que soit la voie à suivre.

  2. 17

    Je pense que vous utilisez le mode par défaut de Angular2 de routage (c'est à dire HTML5LocationStrategy). Dans ce cas, vous avez besoin d'un peu de configuration sur votre serveur pour faire charger les index.html (votre point d'entrée de fichier) pour chaque Url correspondant à chacun des itinéraires.

    Si vous souhaitez passer à la HashBang approche, vous avez besoin pour 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.

    Espère que cela vous aide,
    Thierry

  3. 1

    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 le répertoire racine de votre module suivant:

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

    et il swich à HashLocationStrategy.
    Angulaire documentatation

    Espère que ça va aider quelqu'un !!

  4. 0

    Expansion sur la accepté de répondre, j'ai voulu montrer que le réécrit les règles à l'intérieur de des règles d'hébergement. dans le firebase.json

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

    Firebase a aussi un mise à jour docs page où l'exemple ci-dessus est de.

    Aussi, j'ai été déconcerté par le dièse (#) autour de cette question. J'ai trouvé que cela ne s'applique pas à la nouvelle Angulaire. Faire ces petits changements dans la firebase.json, la reconstruction de, la publication de firebase, et ensuite de faire un refresh de la page avec clear-cache immédiatement résolu mon 404 problème avec aucune solution de rechange nécessaires pour le hachage dans l'URL.