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

firebase angular 5

Question

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

He implementado en firebaseapp con mi aplicación Angular2.

Las rutas parecen cambiar bien, pero cuando actualizo el navegador me redirige 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/**"
   ]
 }

Answer 1

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 documentos actualizada de donde proviene el ejemplo anterior.

Además, me sorprendió la pregunta hash (#) sobre esto. Descubrí que eso no se aplica al nuevo Angular. Realizar estos pequeños cambios en firebase.json, reconstruir, publicar en firebase y luego hacer una página de actualización con clear-cache resolvió de inmediato mi problema 404 sin necesidad de soluciones para los hashes en la URL.

Answer 2

Creo que utiliza 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 mostrará de nuevo.

Espero que te ayude, Thierry

Answer 3

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 múltiples 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.

Answer 4

Tuve el mismo problema en la producción. Los siguientes pasos me ayudaron a solucionar el problema. Debe agregar su módulo raíz a continuación:

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

y cambiará a HashLocationStrategy. Documentación angular.

Espero que ayude a alguien !!