Angular en Apache: rutas al recargar y reglas .htaccess

Durante mi trabajo con Angular en Shure, en Chicago, me encontré con un problema habitual al desplegar una SPA: la navegación dentro de la aplicación funcionaba, pero recargar una ruta devolvía un error del servidor.

¿Por qué falla la ruta al recargar?

Al abrir /productos/uno, Apache busca un recurso con esa ruta. Si la navegación la resuelve Angular, el servidor necesita entregar el archivo de entrada para que el router interprete la URL.

Para una aplicación desplegada en la raíz, un .htaccess puede partir de:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

!-f comprueba que no sea un archivo existente. No lo sustituyas por !-s: un archivo vacío sigue siendo un archivo que quizá deba conservar su respuesta.

¿Y si la aplicación va en una subruta?

Si publicas bajo una subruta, configura la base de la aplicación y la resolución del servidor de forma coherente. Comprueba además dónde genera la compilación sus archivos de navegador: no todas las configuraciones de Angular producen la misma estructura.

¿Cómo compruebo que funciona?

Recarga una ruta interna y abre esa misma URL en una pestaña nueva. Comprueba JavaScript, CSS, imágenes y endpoints de API. El fallback no debe convertir cualquier error de recurso o respuesta del backend en el HTML de la aplicación.

No desactives toda la caché para arreglar el router. Los archivos versionados y el documento de entrada necesitan políticas distintas.

Referencia: despliegue de Angular.

Sigue leyendo

APACHE · URLSmod_rewrite: URLs limpias sin perder archivos ni parámetrosmod_rewrite permite transformar cómo Apache resuelve una URL sin obligar al visitante a conocer la estructura interna de los archivos. Para una…Abrir →CSS · MÓVIL100vh en móviles: cuándo usar svh, lvh y dvhMientras adaptaba CLABA a móviles me encontré con un clásico: un bloque de 100vh que parecía correcto en escritorio y quedaba parcialmente escondido…Abrir →JAVASCRIPT · STRINGSCómo borrar el último carácter de una cadena en JavaScriptCuando construyes una lista concatenando valores y comas, es fácil acabar con un separador de más. En JavaScript puedes quitarlo con slice() , aunque…Abrir →WORDPRESS · NGINXEnlaces permanentes de WordPress con Nginx y PleskCuando WordPress funciona en la portada pero devuelve 404 en las entradas, conviene mirar cómo llega la petición a PHP. En Plesk, Nginx puede actuar…Abrir →

Todas las guías de Desarrollo web y WordPress →