Cuando actualizo mi sitio web obtengo un 404. Esto es con Angular2 y firebase

Cuando actualizo mi sitio web obtengo un 404. Esto es con Angular2, typescript y firebase.

Implementé en firebaseapp con mi aplicación Angular2.

Las rutas parecen cambiar bien, pero cuando actualizo el navegador me redirecciona a la página 404.

Cuando actualizo localmente esto no sucede.

¿Me falta alguna configuración de ruta o configuración de Firebase?

Este es mi archivo firebase.json:

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

Para Firebase Hosting, la documentación sobre redireccionamientos y reescrituras está aquí: https://www.firebase.com/docs/hosting/guide/url-redirects-rewrites.html

Desde allí:

Use una reescritura cuando desee mostrar el mismo contenido para varias URL. Las reescrituras son particularmente útiles con la coincidencia de patrones, ya que puede aceptar cualquier URL que coincida con el patrón y dejar que el código del lado del cliente decida qué mostrar.

Probablemente esté buscando la primera muestra de reescritura en esa página:

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

Esta es una instrucción para que el servidor web sirva /index.html para cualquier solicitud entrante, sin importar cuál sea la ruta.

Creo que utilizas el modo predeterminado de enrutamiento Angular2 (es decir, HTML5LocationStrategy ). En este caso, necesita alguna configuración en su servidor web para cargar el index.html (su archivo de punto de entrada) para cada URL correspondiente a cada ruta.

Si desea cambiar al enfoque HashBang, debe usar esta configuración:

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

En este caso, cuando actualice la página, se volverá a mostrar.

Espero que te ayude, Thierry

Tuve el mismo problema en la producción. Los siguientes pasos me ayudaron a solucionar el problema. Tienes que agregar en tu módulo raíz el siguiente:

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

y se moverá a HashLocationStrategy. Documentacion angular

Espero que ayude a alguien !!

Ampliando la respuesta aceptada, quería mostrar que las reglas de reescritura van dentro de las reglas de alojamiento. en firebase.json

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

Firebase también tiene una página de documentación actualizada de la que proviene el ejemplo anterior.

Además, me deshizo de la pregunta hash (#) al respecto. Descubrí que eso no se aplica al nuevo Angular. Hacer estos pequeños cambios en firebase.json, reconstruir, publicar en firebase y luego hacer una página de actualización con clear-cache resolvió inmediatamente mi problema 404 sin soluciones temporales necesarias para hash en la URL.