Angular 9 ไม่สามารถโหลดสคริปต์โมดูลโดยใช้ AWS S3 และ Cloudfront

Question

ฉันกำลังโฮสต์แอปพลิเคชัน Angular 9 ของฉันใน AWS โดยใช้ S3 และ CloudFront Service หลังจากเข้าถึงแอปพลิเคชันฉันได้รับข้อผิดพลาดต่อไปนี้ในเบราว์เซอร์:

• ไม่สามารถโหลดสคริปต์โมดูล: เซิร์ฟเวอร์ตอบสนองด้วย "text / html" ประเภท MIME ที่ไม่ใช่ JavaScript การตรวจสอบประเภท MIME ที่เข้มงวดถูกบังคับใช้สำหรับสคริปต์โมดูลตามข้อกำหนด HTML /polyfills-es2015.5af60e74e954ace452ee.js:1
• ไม่สามารถโหลดสคริปต์โมดูล: เซิร์ฟเวอร์ตอบสนองด้วย "text / html" ประเภท MIME ที่ไม่ใช่ JavaScript การตรวจสอบประเภท MIME ที่เข้มงวดถูกบังคับใช้สำหรับสคริปต์โมดูลตามข้อกำหนด HTML /main-es2015.9d477ae8338087e639b5.js:1
• ไม่สามารถโหลดสคริปต์โมดูล: เซิร์ฟเวอร์ตอบสนองด้วย "text / html" ประเภท MIME ที่ไม่ใช่ JavaScript การตรวจสอบประเภท MIME ที่เข้มงวดถูกบังคับใช้สำหรับสคริปต์โมดูลตามข้อกำหนด HTML

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>

ฉันได้ลองใช้คำแนะนำที่แตกต่างจากผู้อื่นแล้วโดยเปลี่ยน type = "module" เป็น type = "text / javascript" แต่ก็ยังไม่โชคดี ใครช่วยแนะนำวิธีแก้ไขที่เป็นไปได้สำหรับปัญหานี้

Answer 1

หลังจากอ่านความคิดเห็นทั้งหมดแล้วสาเหตุที่เป็นไปได้มากที่สุดสำหรับปัญหานี้อยู่ด้านล่าง

ตรวจสอบ

1. หากคุณกำลังปรับใช้ในโฟลเดอร์ย่อยให้สร้างด้วยแท็ก base_href ในคำสั่ง ng build --prod
2. ตรวจสอบให้แน่ใจว่าได้ยกเลิกการใช้งานหน้าคลาวด์ด้วย / *
3. ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนเส้นทาง (แท็บใน cloudfront) หน้าข้อผิดพลาด (403) ไปยัง index.html ด้วยการตอบกลับ 200 ครั้ง