1

estoy usando angular 10 con firebase lo que pasa es que al hacer deploy de la aplicacion con firebase, trato de acceder a una ruta que hice desde app-routing.module.ts la cual se accede por medio del id del post la cual es post/:id. he intentado almacenar esa misma ruta en otra constante y aun asi me sigue dando el 404, el deploy me funciona bien pero cuando intento compartir el link del post me tira el not found.

const routes: Routes =

[
  
{path:'',component:ContainerAppComponent,children:

[
{ path: '', loadChildren: () => import('./components/pages/home/home.module').then(m => m.HomeModule) },
**{path:'post/:id',component:DetailsPostComponent}**,
{ path: 'about', loadChildren: () => import('./components/pages/about/about.module').then(m => m.AboutModule) },
{path:'',redirectTo:'',pathMatch:'full'}
]

},
{ path: 'admin', loadChildren: () => import('./components/admin/admin.module').then(m => m.AdminModule) },
{ path: 'login', loadChildren: () => import('./components/auth/login/login.module').then(m => m.LoginModule) },
{ path: 'stat', loadChildren: () => import('./components/posts/estadisticas/estadisticas.module').then(m => m.EstadisticasModule) },


]



@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

el proposito de poder acceder a la ruta es poderla copiar y compartir en otras partes sin que me tire este error en el firebase introducir la descripción de la imagen aquí

1 respuesta 1

0

Éste es un problema recurrente con las SPA (Single Page Application, aplicación de una única página):

Estas aplicaciones tienen la siguiente estructura:

  • Un único fichero HTML, generalmente llamado index.html.
  • Uno o varios ficheros Javascript y/o CSS, importados por el fichero anterior.
  • Resto de recursos (imágenes, vídeo, audio, ficheros JSON... etc), quizá en una carpeta assets o con un nombre similar.

Cuando un usuario carga tu aplicación, generalmente pone la URL "base", digamos algo como www.midominio.com. Lo que hace el servidor web es buscar por defecto un fichero llamado index.html que esté en la carpeta base y servirlo. Hasta aquí todo como esperamos.

El problema es que cuando navegas dentro de esta SPA, la SPA juega con el API del historial del navegador para cambiar la URL, sin realmente cargar ninguna página nueva. Pasas de www.midominio.com a www.midominio.com/post/1, lo que Angular usa para indicar que tiene que cargar cierto componente y mostrar los datos obtenidos al buscar el post con ID 1.

Y aquí viene el pero: el servidor web no ha recibido nunca una petición a la URL www.midominio.com/post/1, si haces una petición real a esa URL obtienes un 404 porque el servidor va a buscar primero un fichero llamado 1.html y, en su defecto, un fichero index.htmlen la carpeta /post/1/, que no existe.

¿Cómo se soluciona esto? En realidad es sencillo: diciendo al servidor web que si no encuentra algo, actúe como si en realidad le estuvieran pidiendo el index.html del directorio raíz. De ese modo tu SPA se carga, detecta que la URL con la que se ha cargado contiene /post/1, y actúa en consecuencia.

Por tanto no es un problema de la aplicación, sino de la configuración del servidor. En el caso de Firebase hay bastante documentación al respecto, por ejemplo [aquí1. La solución propuesta es añadir, en el fichero de configuración de Firebase, lo siguiente:

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.