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.

Qué espera el router

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.

El directorio de despliegue importa

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.

Qué probar

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.