Как решить, что ресурс заблокирован, несовпадение типов MIME в Angular?

Question

Я слежу за Угловой документацией , пытаясь опробовать базовый пример Web Worker.

Я создал базовое шаблонное приложение Angular, и оно отлично работает.

Я добавил очень простой компонент с именем RunnerComponent, а затем выполнил команду (как указано в документации):

ng generate web-worker runner

Это успешно добавляет зависимости, добавляет новый файл TypeScript и добавляет тестовый код в мой RunnerComponent. Вот простой код, который он включает в недавно добавленный runner.worker.ts:

/// <reference lib="webworker" />

addEventListener('message', ({ data }) => {
  const response = `worker response to ${data}`;
  postMessage(response);
});

Вот код, который он добавляет к моему RunnerComponent в runner.component.ts:

if (typeof Worker !== 'undefined') {
  // Create a new
  const worker = new Worker('./runner.worker', { type: 'module' });
  worker.onmessage = ({ data }) => {
    console.log(`page got message: ${data}`);
  };
  worker.postMessage('hello');
} else {
  // Web Workers are not supported in this environment.
  // You should add a fallback so that your program still executes correctly.
}

Приложение продолжает нормально работать, но когда запускается следующая строка, я получаю сообщение об ошибке:

const worker = new Worker('./runner.worker', { type: 'module' });

Основная ошибка (через FireFox)

Ресурс из «http://localhost:4200/runner.worker” был заблокирован из-за несоответствия типа MIME («text / html») (X-Content-Type-Options: nosniff)

Я использую базовый веб-сервер разработки Angular (запускаю его командой ng serve) и предполагаю, что это http-сервер Node.js, но не совсем уверен.

Знаете ли вы, почему я получаю эту ошибку?

Пытается ли он обслуживать настоящий runner.worker.ts, а не сгенерированный контент или что-то в этом роде?

Есть ли способ добавить заголовок nosniff на http-сервер, чтобы ошибка игнорировалась (X-Content-Type-Options: nosniff)? Куда бы я это добавил?

Как я могу решить это?

Обновление: что я пробовал

Я создал общедоступное репозиторий GitHub, в котором содержится проект Angular CLI, который продемонстрирует эту проблему. Получите его по адресу: https://github.com/raddevus/AngularWebWorker Вы можете клонировать репо, попробовать его и увидеть ошибку самостоятельно.

Добавлен маршрут

Я подумал, что, возможно, эта проблема связана с необходимостью маршрута, связанного с моим Runner.Component (URL, запрошенный WebWorker: http://localhost:4200/runner.worker), поэтому я добавил маршрут, чтобы посмотреть, поможет ли это.

const routes: Routes = [{ path:  'runner.worker', 
component:  RunnerComponent}
];

К сожалению, это не решило проблему.

Браузер Tried Edge

Я обычно использую FireFox, и именно поэтому я задокументировал ошибку выше. Поэтому я также попробовал MS Edge, и я получаю похожую ошибку:

SEC7112: скрипт из http://localhost:4200/runner.worker был заблокирован из-за несоответствия типов пантомимы

Пробный браузер Chrome: версия 75.0.3770.100 (официальная сборка) (64-разрядная версия)

вижу следующее:

runner.component.ts: 13 Uncaught TypeError: Не удалось создать «Рабочий»: модульные сценарии еще не поддерживаются в DedicatedWorker. Вы можете попробовать функцию с '--enable-экспериментальным-веб-платформой-функциями' флаг (см. https://crbug.com/680046)

at Module../src/app/runner.component.ts (runner.component.ts:13)

Эта строка кода (runner.component.ts: 13):

const worker = new Worker('./runner.worker', { type: 'module' });

Связанная ссылка длинная, и мне придется прочитать ее, чтобы увидеть, имеет ли она какое-то значение.

Answer 1

Я вытащил свой код с сайта GitHub (для локального тестирования), скомпилировал код, и теперь решение работает (ошибка не возникает).

Вы видите, что код теперь выполняется на следующем изображении, поскольку ожидаемый вывод записывается в console.log и показывает, что строка runner.component.ts: 15 выполнена.

Я считаю, что теперь это работает, потому что я добавил угловой маршрут. Однако вчера и вчера вечером, когда я добавил этот маршрут, я все еще не видел, как он работает. Я не уверен, если это проблема с http-сервером или проблема с кэшированием или что-то еще. Мне придется провести расследование, чтобы определить основную причину.

Удален маршрут, все еще работает

Я удалил маршрут, остановил http-сервер и снова запустил его, а код все еще работает. Теперь я не могу воссоздать проблему. Однако, как видите, проблема решена, и я протестировал ее как в Chrome, так и в FireFox.

Обновление: ошибка возникает по другим причинам

Я начал все заново, пытаясь воссоздать проблему, которая, казалось, исчезла.

Я создал новый Angular-проект через CLI:

ng new ThirdOne 

Я построил и запустил. Затем я снова добавил веб-работника через исходные документы

ng generate web-worker runner

Затем я снова увидел похожую ошибку, которая указывает на эту конкретную строку веб-работника, но является ошибочной.

Вы можете увидеть ошибку в FireFox:

Но теперь оно немного отличается в более старой версии Chrome (версия 56.0.2924.87):

Но сравните это с ошибкой, которую я получаю в текущей версии Chrome (версия 75.0.3770.100 (официальная сборка) (64-разрядная версия)):

Это красная сельдь

Обратите внимание, что он снова указывает на ту же строку в коде, которая является экземпляром Web Worker (runner.component.ts: 13). Примечание : он не отображает большую часть страницы.

const worker = new Worker('./runner.worker', { type: 'module' });

Но это не совсем коренная проблема. Это все довольно ужасно.

Окончательное обновление: код Visual Studio: The Culprit?

В качестве редактора я использую код Visual Studio.

Версия : 1.35.1 (настройка пользователя)
Commit: c7d83e57cd18f18026a8162d042843bda1bcf21f
Дата : 2019-06-12T14: 30: 02.622Z
Электрон : 3.1.8
Chrome : 66.0.3359.181 Node.js: 10.2.0 V8: 6.6.346.32

ОС : Windows_NT x64 10.0.14393

Возможное странное решение

После публикации этого последнего обновления я решил закрыть проект в Visual Studio Code и перезапустить http-сервер (узел http server). Я так и сделал, и проблема ушла.

И, может быть, это связано с тем, что Visual Studio Code реализует код Chrome ??

Вчера я несколько раз перезагружал http-сервер и продолжал видеть проблему. Тем не менее, я сохранил проект открытым в Visual Studio Code. Это может быть ответ, и это ужасно.

Окончательный ответ

Сегодня (почти через 2 недели) я снова работал над новым Angular-проектом и добавлял нового Angular Web Worker. Я снова столкнулся с проблемой. На этот раз я убедился, что вы должны:

1. Закрыть проект в Visual Studio Code
2. Остановить http-сервер
3. запустить ng build (пересобрать приложение на Angular)
4. Запустите http-сервер снова ng serve

Проблема исчезнет, ​​и вы снова сможете редактировать проект с помощью кода Visual Studio.