0

Quiero tener mi proyecto angular ya listo para producción en XAMPP. Alojé mi proyecto en httdocs, acceso a la ruta http://localhost/calidad-frontend/Panel/Administrador y me aparece correcto al vista, voy interactuando con las demás vistas mediante botones y el menú que contiene mi página y todo bien con las rutas. El problema es que cuando recargo la página me sale el error:

The requested URL was not found on this server.

Ya configuré el archivo .htaccess que creé en la carpeta raíz para redirigir las rutas que no proceda apache al index.html de angular.
Así tengo el archivo .htaccess:

RewriteEngine On
# Si la solicitud es para un archivo, directorio o enlace simbólico existente...
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d [OR]
# ...entonces no hagas nada
RewriteRule ^ - [L]
# De lo contrario, redirige la solicitud a index.html
RewriteRule ^ /index.html

Tengo activados todos los permisos de los módulos para la reescritura de las rutas por el archivo .htaccess. ¿En qué me estoy equivocando?

1 respuesta 1

0

Aloha~ buen día,

Primero lo primero, ¿por qué funciona?

Angular carga en memoria las rutas y vas navegando desde la aplicación, no desde los directorios/folders que hay en el servidor.

Si le doy refresh, ¿por qué ya no funciona?

Porque el navegador le está diciendo al server: dame el recurso que está físicamente en esta ruta (por ejemplo): /calidad-frontend/Panel/OtroModulo Entonces el server va a ir a la ruta /calidad-frontend/Panel/OtroModulo y buscará algún archivo index.html, el cual por efectos de haber hecho un SPA, es un archivo inexistente.

¿Cómo se arregla?

Una opción es aplicar useHash como true

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: true, // Aquí va la magia del asunto.
  })],
  exports: [RouterModule]
})

El detalle ahora es que tus rutas estarán tipo:

https://example.com/calidad-frontend/#/Panel/Administrador

Es importante colocar el base-href('calidad-frontend') en el index.html

localhost:4200/calidad-frontend/#/welcome/

Con esto, el server va a ir directo al único archivo de entrada físico que existe y las rutas

Datos adicionales:

  1. Lee el recorrido: https://es.stackoverflow.com/tour -> aquí obtendrás tu medalla de informado y verás la dinámica del sitio.

  2. Revisa la documentación de las rutas de Angular en: https://angular.dev/guide/routing/common-router-tasks#choosing-a-routing-strategy

  3. Publicación relacionada en el sitio inglés: https://stackoverflow.com/a/52417120/3613462

3
  • Añadí el useHas como true y ahora las rutas las miro así: localhost/calidad-frontend/calidad-frontend#/Panel/… y en el index.html del proyecto angular agregue: <base href="calidad-frontend"> pero aun asi me sigue dando el mismo error, cual podría seguir siendo el error?
    – Carlos
    Commented el 14 feb. a las 20:41
  • cambie el: <base href="calidad-frontend"> por <base href="index.html"> y ahora si funciona, no se si este correcto lo que realice, sino es correcto creo que seguiré teniendo el mismo error
    – Carlos
    Commented el 14 feb. a las 20:53
  • Lee el recorrido y también los enlaces. Me sorprende que haya un negativo, en todas las preguntas y respuestas relacionadas en el sitio inglés, es tema válido. En fin, meh~
    – fredyfx
    Commented el 14 feb. a las 21:33

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.