加载模块脚本失败：需要一个 JavaScript 模块脚本，但服务器响应 MIME 类型为 \"text/html\"答案

【问题标题】：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"加载模块脚本失败：需要一个 JavaScript 模块脚本，但服务器响应 MIME 类型为 \"text/html\"
【发布时间】：2022-08-07 04:27:27
【问题描述】：

我在 kubernetes 上部署了我的 Angular 应用程序（静态网页），并尝试从 Google Chrome 启动它。我看到应用程序正在加载，但是浏览器上没有显示任何内容。检查浏览器控制台后，我可以看到此错误

\"加载模块脚本失败：需要一个 JavaScript 模块脚本，但服务器响应 MIME 类型为 \"text/html\"。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。\" 对于 (main.js,poylfill.js,runtime.js) 文件。我研究了几个论坛，一个可能的根本原因可能是因为 <script> 标签中的 type 属性应该是 type=text/javascript 而不是我的 index.html 文件中的 type=module，该文件是在执行 ng build 后在 dist 文件夹下生成的。我不知道如何对构建过程中生成的这些标签进行更改，并且我的 ng-build 命令由 docker 命令负责。

我尝试访问的 URL 类似于：\"http://xxxx:portnum/issuertcoetools

注意：主机xxxx:portnum 也将被许多其他应用程序使用。

这个问题有什么变通办法或解决方案吗？

index.html - 在本地运行 ng-build 后生成（这与我在 kubernetes POD 中看到的相同）

<!DOCTYPE html><html lang=\"en\"><head>
    <meta charset=\"utf-8\">
    <title>Data Generator</title>
    <base href=\"/\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
    <link rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\">
    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\">
    <style type=\"text/css\">@font-face{font-family:\'Roboto\';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format(\'woff2\');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format(\'woff2\');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format(\'woff2\');unicode-range:U+1F00-1FFF;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format(\'woff2\');unicode-range:U+0370-03FF;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format(\'woff2\');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format(\'woff2\');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format(\'woff2\');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format(\'woff2\');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format(\'woff2\');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format(\'woff2\');unicode-range:U+1F00-1FFF;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format(\'woff2\');unicode-range:U+0370-03FF;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format(\'woff2\');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format(\'woff2\');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format(\'woff2\');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format(\'woff2\');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format(\'woff2\');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format(\'woff2\');unicode-range:U+1F00-1FFF;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format(\'woff2\');unicode-range:U+0370-03FF;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format(\'woff2\');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format(\'woff2\');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:\'Roboto\';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format(\'woff2\');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}</style>
    <style type=\"text/css\">@font-face{font-family:\'Material Icons\';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v128/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format(\'woff2\');}.material-icons{font-family:\'Material Icons\';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\'liga\';-webkit-font-smoothing:antialiased;}</style>
<style>.mat-typography{font:400 14px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}html,body{height:100%}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}</style><link rel=\"stylesheet\" href=\"styles.9c0548760c8b22be.css\" media=\"print\" onload=\"this.media=\'all\'\"><noscript><link rel=\"stylesheet\" href=\"styles.9c0548760c8b22be.css\"></noscript></head>

<body class=\"mat-typography\">
    <app-root></app-root>
 
<script src=\"runtime.397c3874548e84cd.js\" type=\"module\">
</script><script src=\"polyfills.2145acc81d0726ab.js\" type=\"module\">
</script><script src=\"main.a655dca28148b7e2.js\" type=\"module\"></script>

</body></html>

nginx.conf 文件

worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 8080;
        include /etc/nginx/mime.types;

  location /issuertcoetools {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}
}

如果下面的答案解决了您的问题，请通过单击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。
谢谢你成功了！我不能早点给你+1，因为我仍然没有资格这样做？？？？

标签： javascript angular google-chrome kubernetes mime-types

【解决方案1】：

发生此错误通常是因为您的部署位于子文件夹中，因此 Angular 似乎直接从您的基本 URL 获取您的应用程序，因此当您转到 domain.com/mysubfolder/index.html 时会找到您的 html，但是当 Angular 从 @ 获取您的资源时987654322@ 而不是 domain.com/mysubfolder/index.html；我很确定这是您的问题的原因。您可以通过以下方式解决它构建您的应用程序：

ng build --prod --base-href mysubfolder

【讨论】：

【解决方案2】：

检查include /etc/nginx/mime.types;在NGINX conf中，该路径可能有错误，依靠日志（nginx）。

【讨论】：