Eliminar la estrategia hash,

 RouterModule.forRoot(routes, { useHash: false });

Vaya a la configuración de hospedaje de sitio web estático de su depósito y configure Documento de error en index.html.

Básicamente, solo queremos servir index.html en todos los casos, ya que ese es el archivo que debe servirse en todos los casos, ya que la compilación angular no tiene una estructura de carpetas para rutas como sitios web estáticos.

Ahora sus rutas se verán así:

 localhost:4200/home

En lugar de:

 localhost:4200/#/home

Referencia de AWS: https://docs.aws.amazon.com/AmazonS3/latest/userguide/CustomErrorDocSupport.html#custom-error-document

Antes de escribir la solución, permítanme explicar brevemente lo que se necesita hacer. En general, la navegación de páginas en aplicaciones de una sola página (SPA) se logra mediante código javascript que manipula la vista y/o monitorea la URL y los eventos del historial de navegación. Cuando inicia la aplicación y hace clic en diferentes enlaces, por ejemplo /user , la aplicación no se vuelve a cargar, sigue siendo la misma aplicación cargada a través de root index.html que reacciona al enlace en el que se hizo clic cambiando a la vista o componente correspondiente y modificando la URL en la barra de direcciones.

Sin embargo, si navega a example.com/user directamente después de abrir el navegador (sin la carga inicial de la raíz ejemplo.com), el navegador enviará una solicitud a la ruta /user que en realidad no existe ni en el depósito S3, ni en distribución frente a la nube, aunque fallará. Nuestro objetivo es obligar a S3 y Cloudfront a devolver siempre el archivo raíz index.html, independientemente de cuál haya sido la ruta original de la solicitud.

Para lograrlo, necesita cambiar ligeramente la configuración del depósito S3 y la distribución de Cloudfront.

Antes de pasar a los cambios relacionados con AWS, cambie la propiedad useHash de la importación de RouterModule a false :

 RouterModule.forRoot(routes, { useHash: false })

1. Abra su depósito S3 en la consola web de AWS, vaya a la pestaña "propiedades", busque la sección "alojamiento de sitio web estático", habilítelo si estaba deshabilitado y coloque index.html en ambos campos: documento de índice y documento de error .

Luego guarde la configuración. En realidad, ahora su archivo index.html se servirá para cualquier ruta igual que para la raíz. Ya debería notar eso cuando abre su sitio web después de que se aplicaron los cambios anteriores. Sin embargo, notará que el código de respuesta es 404 a pesar de que la aplicación se abre correctamente; sucede porque todavía es la respuesta "no encontrada" ya que la ruta no existe. También se necesitan algunos cambios en la configuración de la nube para que funcione aún mejor.

2. Vaya a la página de distribución de Cloudfront en la consola web de AWS. Supongo que dado que ya tiene una distribución frente a la nube (lo mencionó en la pregunta), probablemente ya tenga todas las configuraciones predeterminadas y su depósito S3 ya esté conectado como origen para esta distribución. Vaya a la pestaña "páginas de error" y presione "crear nueva respuesta de error personalizada". Haga clic en "sí" en la entrada "personalizar", seleccione el código de error 404, escriba "/index.html" en la entrada "ruta de la página de respuesta" y seleccione el código 200OK para la respuesta. Luego guarde la configuración. Puede tardar unos minutos en empezar a funcionar.

Ahora intente abrir el sitio web; ya no debería ver las respuestas 404 porque ahora todas las solicitudes (incluso las rutas no existentes) tienen el código 200.