Angular 9 Failed to load module script using AWS S3 and Cloudfront

I am hosting my Angular 9 application in AWS using S3 and CloudFront Service. After accessing the application I am getting following error in the browser:

  • Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
    /polyfills-es2015.5af60e74e954ace452ee.js:1
  • Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
    /main-es2015.9d477ae8338087e639b5.js:1
  • Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

My 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">
  https://www.google.com/recaptcha/api.js 
<link rel="stylesheet" href="styles.7f06624db32e037ad1c6.css"></head>
<body>
  <reach-root></reach-root>
  <div id="displayError"></div> <!-- Display message if IE broswer-->
http://runtime-es2015.0dae8cbc97194c7caed4.jshttp://runtime-es5.0dae8cbc97194c7caed4.jshttp://polyfills-es5.352c85d9e468300d10fb.jshttp://polyfills-es2015.27bdbf82a4d61d823e83.jshttp://main-es2015.89b57a9808d25011d96d.jshttp://main-es5.89b57a9808d25011d96d.js</body>
</html>

I already tried different suggestions provided by others by replacing the type="module" to type="text/javascript" but still no luck.
Could anyone suggest any possible fix for this issue?

Source: Angular Questions