Angular 9 Fehler beim Laden des Modulskripts mit AWS S3 und Cloudfront

Question

Ich hoste meine Angular 9-Anwendung in AWS mit S3 und CloudFront Service. Nach dem Zugriff auf die Anwendung wird im Browser folgende Fehlermeldung angezeigt:

• Fehler beim Laden des Modulskripts: Der Server antwortete mit einem Nicht-JavaScript-MIME-Typ von "text / html". Die strikte MIME-Typprüfung wird für Modulskripte gemäß HTML-Spezifikation erzwungen. /polyfills-es2015.5af60e74e954ace452ee.js:1
• Fehler beim Laden des Modulskripts: Der Server antwortete mit einem Nicht-JavaScript-MIME-Typ von "text / html". Die strikte MIME-Typprüfung wird für Modulskripte gemäß HTML-Spezifikation erzwungen. /main-es2015.9d477ae8338087e639b5.js:1
• Fehler beim Laden des Modulskripts: Der Server antwortete mit einem Nicht-JavaScript-MIME-Typ von "text / html". Die strikte MIME-Typprüfung wird für Modulskripte gemäß HTML-Spezifikation erzwungen.

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

Ich habe bereits verschiedene Vorschläge von anderen ausprobiert, indem ich type = "module" durch type = "text / javascript" ersetzt habe, aber immer noch kein Glück. Könnte jemand eine mögliche Lösung für dieses Problem vorschlagen?

Answer 1

Nachdem Sie alle Kommentare durchgesehen haben, ist die wahrscheinlichste Ursache für dieses Problem unten aufgeführt

Prüfen

1. Wenn Sie im Unterordner bereitstellen, erstellen Sie mit dem Tag base_href im Befehl ng build --prod
2. Stellen Sie sicher, dass die Cloud-Front mit / * ungültig wird
3. Stellen Sie sicher, dass Sie die Fehlerseiten (403) mit 200 Antworten auf index.html umleiten (Registerkarte in der Cloudfront)