Angular 9 n'a pas pu charger le script de module à l'aide d'AWS S3 et de Cloudfront

Question

J'héberge mon application Angular 9 dans AWS à l'aide de S3 et du service CloudFront. Après avoir accédé à l'application, j'obtiens l'erreur suivante dans le navigateur:

• Échec du chargement du script du module: le serveur a répondu avec un type MIME non JavaScript de "text / html". Une vérification stricte du type MIME est appliquée pour les scripts de module selon les spécifications HTML. /polyfills-es2015.5af60e74e954ace452ee.js:1
• Échec du chargement du script du module: le serveur a répondu avec un type MIME non JavaScript de "text / html". Une vérification stricte du type MIME est appliquée pour les scripts de module selon les spécifications HTML. /main-es2015.9d477ae8338087e639b5.js:1
• Échec du chargement du script du module: le serveur a répondu avec un type MIME non JavaScript de "text / html". Une vérification stricte du type MIME est appliquée pour les scripts de module selon les spécifications HTML.

Mon 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'ai déjà essayé différentes suggestions fournies par d'autres en remplaçant le type = "module" par type = "text / javascript" mais toujours pas de chance. Quelqu'un pourrait-il suggérer une solution possible à ce problème?

Answer 1

Après avoir parcouru tous les commentaires, la cause la plus probable de ce problème est ci-dessous

Vérifier

1. Si vous déployez dans un sous-dossier, compilez avec la balise base_href dans la commande ng build --prod
2. assurez-vous d'invalider le front du cloud avec / *
3. Assurez-vous de rediriger (onglet dans cloudfront) les pages d'erreur (403) vers index.html avec 200 réponses