12

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

Ho installato su firebaseapp con la mia app Angular2.

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

Quando si aggiorna localmente ciò non accade.

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/**" 
    ] 
} 
+0

fatemi sapere se qualcuno ha bisogno di vedere i percorsi angular2 – AngularM

+0

ho un 404 redirect ad un Firebase pagina 404 – AngularM

+1

Eventuali duplicati di [angolare 2: errore 404 si verifica quando rinfresco attraverso il browser] (http://stackoverflow.com/questions/35284988/angular-2-404-error-happen-when-i-refresh-through-browser) –

risposta

14

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

Da lì:

Utilizzare una riscrittura quando si desidera visualizzare il 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.

Stai probabilmente cercando il primo campione riscrittura in quella pagina:

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

Questa è un'istruzione per il server web per servire /index.html per qualsiasi richiesta in entrata, non importa quale sia il percorso è.

+0

grazie che ha funzionato bene – AngularM

+0

@AngularM o chiunque capisca come risolvere il problema, ti preghiamo di fornire l'esempio funzionante di rimozione della procedura di # # dall'URL? –

+0

il cancelletto (hashtag) può essere rimosso usando $ locationProvider come visto qui https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag – Felipe

16

Penso che si utilizza la modalità predefinita di Angular2 instradamento (vale a dire HTML5LocationStrategy). In questo caso, è necessaria una certa configurazione sul server web per caricare lo index.html (il file del punto di ingresso) per ogni URL corrispondente a ciascun instradamento.

Se si desidera passare al metodo 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à visualizzato di nuovo.

Spero che ti aiuta, Thierry

+0

Non voglio un approccio hash – AngularM

+1

Quindi devi configurare il lato server per servire il file 'index.html' per ogni percorso che hai definito ... –

+0

come faccio per l'hosting di Firebase? e con angular2? – AngularM