Quando aggiorno il mio sito web ottengo un 404. Questo è con Angular2 e Firebase

Quando aggiorno il mio sito web ottengo un 404. Questo è con Angular2, typescript e firebase.

Ho implementato firebaseapp con la mia app Angular2.

Gli itinerari sembrano cambiare bene, ma quando aggiorno il browser mi reindirizza alla pagina 404.

Quando aggiorno localmente questo non succede.

Mi mancano le impostazioni del percorso o le impostazioni Firebase?

Questo è il mio file firebase.json:

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

Per Firebase Hosting la documentazione su reindirizzamenti e redirect è disponibile qui: https://www.firebase.com/docs/hosting/guide/url-redirects-rewrites.html

Da li:

Usa una riscrittura quando vuoi mostrare lo stesso contenuto per più URL. Riscrivi sono particolarmente utili con la corrispondenza dei pattern, in quanto puoi accettare qualsiasi URL che corrisponda al pattern e lasciare che il codice lato client decida cosa visualizzare.

Probabilmente stai cercando il primo campione di riscrittura su quella pagina:

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

Questa è un’istruzione per il web server per servire /index.html per qualsiasi richiesta in arrivo, indipendentemente dal percorso.

Penso che tu usi la modalità predefinita del routing Angular2 (cioè HTML5LocationStrategy ). In questo caso, hai bisogno di una certa configurazione sul tuo webserver per caricare il file index.html (il tuo file dei punti di ingresso) per ogni URL corrispondente a ciascun instradamento.

Se si desidera passare all’approccio HashBang, è necessario utilizzare questa configurazione:

 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 questo caso, quando si aggiorna la pagina, verrà visualizzata di nuovo.

Spero che ti aiuti, Thierry

Ho avuto lo stesso problema sulla produzione. I seguenti passaggi mi hanno aiutato a risolvere il problema. Devi aggiungere il tuo modulo di root successivo:

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

e passerà a HashLocationStrategy. Documentazione angular

Spero che possa aiutare qualcuno !!

Espandendo la risposta accettata, volevo dimostrare che le regole di riscrittura rientrano nelle regole di hosting. nel firebase.json

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

Firebase ha anche una pagina dei documenti aggiornata da cui proviene l’esempio precedente.

Inoltre, sono stato buttato fuori dalla domanda di hash (#) intorno a questo. Ho trovato che non si applica al nuovo angular. Apportare queste piccole modifiche in firebase.json, ribuild, pubblicare in firebase e quindi eseguire una pagina di aggiornamento con clear-cache ha risolto immediatamente il problema 404 senza soluzioni alternative per gli hash nell’URL.