Angular 9 Falha ao carregar o script do módulo usando AWS S3 e Cloudfront

Question

Estou hospedando meu aplicativo Angular 9 no AWS usando S3 e CloudFront Service. Depois de acessar o aplicativo, estou recebendo o seguinte erro no navegador:

• Falha ao carregar o script do módulo: o servidor respondeu com um tipo MIME não JavaScript de "text / html". A verificação estrita de tipo MIME é aplicada para scripts de módulo por especificação HTML. /polyfills-es2015.5af60e74e954ace452ee.js:1
• Falha ao carregar o script do módulo: o servidor respondeu com um tipo MIME não JavaScript de "text / html". A verificação estrita de tipo MIME é aplicada para scripts de módulo por especificação HTML. /main-es2015.9d477ae8338087e639b5.js:1
• Falha ao carregar o script do módulo: o servidor respondeu com um tipo MIME não JavaScript de "text / html". A verificação estrita de tipo MIME é aplicada para scripts de módulo por especificação HTML.

Meu 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>

Já tentei várias sugestões fornecidas por outros, substituindo o type = "module" para type = "text / javascript", mas ainda sem sorte. Alguém poderia sugerir alguma solução possível para esse problema?

Answer 1

Depois de passar por todos os comentários, a causa mais provável para esse problema está abaixo

Verifica

1. Se você estiver implantando em uma subpasta, crie com a tag base_href no comando ng build --prod
2. certifique-se de invalidar o Cloud Front com / *
3. Certifique-se de redirecionar (guia em cloudfront) as páginas de erro (403) para index.html com 200 respostas