Angular 9 Impossibile caricare lo script del modulo utilizzando AWS S3 e Cloudfront

Question

Sto ospitando la mia applicazione Angular 9 in AWS utilizzando S3 e CloudFront Service. Dopo aver effettuato l'accesso all'applicazione, ricevo il seguente errore nel browser:

• Impossibile caricare lo script del modulo: il server ha risposto con un tipo MIME non JavaScript "text / html". Il rigoroso controllo del tipo MIME viene applicato agli script del modulo in base alle specifiche HTML. /polyfills-es2015.5af60e74e954ace452ee.js:1
• Impossibile caricare lo script del modulo: il server ha risposto con un tipo MIME non JavaScript "text / html". Il rigoroso controllo del tipo MIME viene applicato agli script del modulo in base alle specifiche HTML. /main-es2015.9d477ae8338087e639b5.js:1
• Impossibile caricare lo script del modulo: il server ha risposto con un tipo MIME non JavaScript "text / html". Il rigoroso controllo del tipo MIME viene applicato agli script del modulo in base alle specifiche HTML.

Il mio 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>

Ho già provato diversi suggerimenti forniti da altri sostituendo type = "module" con type = "text / javascript" ma ancora senza fortuna. Qualcuno potrebbe suggerire una possibile soluzione per questo problema?

Answer 1

Dopo aver esaminato tutti i commenti, la causa più probabile di questo problema è di seguito

Dai un'occhiata

1. Se stai distribuendo in una sottocartella, crea con il tag base_href nel comando ng build --prod
2. assicurati di invalidare Cloud Front con / *
3. Assicurati di reindirizzare (scheda in cloudfront) le pagine di errore (403) a index.html con 200 risposte