Angular 9 no pudo cargar el script del módulo usando AWS S3 y Cloudfront

Question

Estoy alojando mi aplicación Angular 9 en AWS usando S3 y CloudFront Service. Después de acceder a la aplicación, aparece el siguiente error en el navegador:

• Error al cargar la secuencia de comandos del módulo: el servidor respondió con un tipo MIME no JavaScript de "texto / html". Se aplica una comprobación estricta del tipo MIME para los scripts de módulo según la especificación HTML. /polyfills-es2015.5af60e74e954ace452ee.js:1
• Error al cargar la secuencia de comandos del módulo: el servidor respondió con un tipo MIME no JavaScript de "texto / html". Se aplica una comprobación estricta del tipo MIME para los scripts de módulo según la especificación HTML. /main-es2015.9d477ae8338087e639b5.js:1
• Error al cargar la secuencia de comandos del módulo: el servidor respondió con un tipo MIME no JavaScript de "texto / html". Se aplica una comprobación estricta del tipo MIME para los scripts de módulo según la especificación HTML.

Mi index.html:

<!doctype html>
<html>
<head>    
  <meta charset="utf-8">
  <title>ReachApp Success</title>
  <base href="/reach">
    <!-- TODo: check for common configuration for material icon -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src='https://www.google.com/recaptcha/api.js' async defer></script> 
<link rel="stylesheet" href="styles.7f06624db32e037ad1c6.css"></head>
<body>
  <reach-root></reach-root>
  <div id="displayError"></div> <!-- Display message if IE broswer-->
<script src="runtime-es2015.0dae8cbc97194c7caed4.js" type="module"></script><script src="runtime-es5.0dae8cbc97194c7caed4.js" nomodule defer></script><script src="polyfills-es5.352c85d9e468300d10fb.js" nomodule defer></script><script src="polyfills-es2015.27bdbf82a4d61d823e83.js" type="module"></script><script src="main-es2015.89b57a9808d25011d96d.js" type="module"></script><script src="main-es5.89b57a9808d25011d96d.js" nomodule defer></script></body>
</html>

Ya probé diferentes sugerencias proporcionadas por otros reemplazando el tipo = "módulo" por tipo = "texto / javascript", pero aún así no tuve suerte. ¿Alguien podría sugerir alguna posible solución para este problema?

Answer 1

Después de leer todos los comentarios, la causa más probable de este problema se encuentra a continuación.

Cheque

1. Si está implementando en una subcarpeta, compile con la etiqueta base_href en el comando ng build --prod
2. asegúrese de invalidar el frente de la nube con / *
3. Asegúrese de redirigir (pestaña en el frente de la nube) las páginas de error (403) a index.html con 200 respuestas