Nginx：带有 Web 组件的 Angular 应用程序 - 脚本类型 =“模块”错误

Question

我想通过一个简单的 Nginx 服务器来提供 Angular 8 应用程序。不幸的是，当我尝试提供该应用程序时，我在 Chrome 中收到以下错误：

无法加载模块脚本：服务器以非 JavaScript MIME 类型“text/plain”进行响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

我找到了几个解决方案（例如这个和那个）建议我应该手动配置所有script标签并添加type="javascript". 但是，就我而言，我无法执行此操作，因为我的应用程序包含只能在脚本类型属性为 时加载的Web 组件type="module"。

我的 Nginx 配置如下所示：

events { worker_connections 1024; }

http
{
    sendfile on;

    server {
        root /usr/share/nginx/html/app;
        listen 9020;
        server_name  localhost;

        location / {
            index  index.html index.htm;
        }

        location ~ \.css {
            add_header  Content-Type    text/css;
        }

        location ~ \.js {
            add_header  Content-Type    application/javascript;
        }
    }
}

你知道我如何配置 Angular 或 Nginx 来提供“模块”类型的javascript 文件（包含script在 中的标签中）吗？index.html

先感谢您。

Answer 1

您应该提供具有type="module"mime 类型的javascript text/javascript，如下所述：

.js 文件需要使用文本/javascript 的 MIME 类型（或其他与 JavaScript 兼容的 MIME 类型，但建议使用文本/javascript）加载，否则您将收到严格的 MIME 类型检查错误，例如“服务器响应”具有非 JavaScript MIME 类型”。

除此之外，您的 nginx SPA 配置不正确，因为它永远不会到达 .js 位置语句。您应该添加一条try_files声明：

server {
    root /usr/share/nginx/html/app;
    listen 9020;
    server_name  localhost;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* ^.+\.css$ {
        default_type text/css;
    }

    location ~* ^.+\.js$ {
        default_type text/javascript;
    }
}