Nginx: Angular приложение с веб-компонентами - скрипт type = "module" error

Question

Я бы хотел обслуживать приложение Angular 8 с простым Nginx сервером. К сожалению, когда я пытаюсь обслуживать приложение, я получаю следующую ошибку в Chrome:

Не удалось загрузить скрипт модуля: сервер ответил не-JavaScript MIME-типом "text / равнина». Строгая проверка типов MIME применяется для скриптов модулей согласно HTML spe c.

Я нашел несколько решений ( this и , например ) предлагая вручную настроить все теги script и добавить type="javascript". Однако в моем случае я не могу этого сделать, потому что мое приложение содержит Веб-компоненты , которые могут быть загружены, только если атрибут типа сценария имеет значение 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

Вы должны подать javascript, который имеет type="module" с типом пантомимы text/javascript, как указано здесь :

. js файлы должны быть загружены с текстовый MIME-тип / javascript (или другой MIME-тип, совместимый с JavaScript, но рекомендуется текст / javascript), в противном случае вы получите строгую ошибку проверки типа MIME, например: «Сервер ответил не- JavaScript MIME-тип ".

Кроме того, ваша конфигурация SPA для nginx неверна, так как никогда не достигает оператора местоположения. 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;
    }
}

Answer 2

Вопреки моему предположению, я обнаружил, что не имеет значения, пишу ли я <script type="module"> или script type="text/javascript" в моем индексе. html.

Однако, Я просто забыл часть text / в объявлении типа MIME, поэтому не удалось правильно разрешить файлы. Виноват. Теперь правильное решение этой проблемы состоит в замене всех типов MIME module на text/javascript.

Фактическая проблема, по-видимому, возникает только с Angular 8 и обсуждается с июня 2019 в этот отчет об ошибке GitHub . Другое решение, основанное на моем техническом стеке (Angular 8 + Nginx), заключается в явном объявлении ассоциации типов MIME в Nginx для таких скриптов модулей:

http {
    types {
      module js;
    }
    include       /etc/nginx/mime.types;
    # rest of your config...
}

(см. https://github.com/angular/angular/issues/30835#issuecomment -583943657 )