Не удалось создать «рабочий»: модульные скрипты не поддерживаются в DedicatedWorker, но в Angular 8

Question

Ошибка

ОШИБКА в node_modules / typescript / lib / lib.dom.d.ts (25,1): ошибка TS6200: определения следующих идентификаторов конфликтуют с идентификаторами в другом файле: EventListenerOrEventListenerObject, BlobPart, HeadersInit, BodyInit, RequestInfo, DOMHighResTimeStamp, CanvasImageSource, MessageEventSource, ImageBitmapSource, TimerHandler, PerformanceEntryList, VibratePattern, AlgorithmIdentifier, HashAlgorithmIintier, GL, GLF, GL GLIFE GLBERT, TexImageSource, Float32List, Int32List, BufferSource, DOMTimeStamp, FormDataEntryValue, IDBValidKey, Переводной, BinaryType, ClientTypes, EndingType, IDBCursorDirection, IDBRequestReadyState, IDBTransactionMode, KeyFormat, KeyType, KeyUsage, NotificationDirection, NotificationPermission, PushEncryptionKeyName, PushPermissionState, ReferrerPolicy, RequestCache, RequestCredentials, RequestDestination, RequestMode, RequestRedirect, ОтветseType, ServiceWorkerState, ServiceWorkerUpdateViaCache, VisibilityState, WebGLPowerPreference, WorkerType, XMLHttpRequestResponseType node_modules / typescript / lib / lib.dom.d.ts (3473,5): ошибка TS2687: все объявления идентификаторов privateKey должны иметь все объявления одинакового типаnode_modules / typescript / lib / lib.dom.d.ts (3474,5): ошибка TS2687: все объявления publicKey должны иметь одинаковые модификаторы.node_modules / typescript / lib / lib.webworker.d.ts (25,1): ошибка TS6200: определения следующих идентификаторов конфликтуют с идентификаторами в другом файле: EventListenerOrEventListenerObject, BlobPart, HeadersInit, BodyInit, RequestInfo, DOMHighResTimeStamp, CanvasImageSource, CanvasImageSource, MessageImageBitmapSource, TimerHandler, PerformanceEntryList, VibratePattern, AlgorithmIdentifier, HashAlgorithmIdentifier, BigInteger, NamedCurve, GLenum, GLboolean, GLbitfield, GLint, GLsizei, GLintptr, GLsizeiptr, GLuint, GLfloat, GLclampf, TexImageSource, Float32List, Int32List, BufferSource, DOMTimeStamp, FormDataEntryValue, IDBValidKey,Передаваемый, BinaryType, ClientTypes, EndingType, IDBCursorDirection, IDBRequestReadyState, IDBTransactionMode, KeyFormat, KeyType, KeyUsage, NotificationDirection, NotificationPermission, PushEncryptionKeyName, PushPermissionState, RequestTerviceServiceTeventStateStateStateStateStateStateNecidServiceTeventServiceTechServiceTeventServiceTeventServiceTeventServiceTextServiceReventServiceTextServiceText, TransidableServiceTevent, RequestTerviceServiceText, Transferable, BinaryType.eWorkerUpdateViaCache, VisibilityState, WebGLPowerPreference, WorkerType, XMLHttpRequestResponseType node_modules / typescript / lib / lib.webworker.d.ts (85,5): ошибка TS2687: все объявления «privateKey» должны иметь одинаковые модификаторы.node_modules / typescript / lib / lib.webworker.d.ts (86,5): ошибка TS2687: все объявления publicKey должны иметь одинаковые модификаторы.node_modules / typescript / lib / lib.webworker.d.ts (1074,5): ошибка TS2375: дубликат подписи индекса числа.node_modules / typescript / lib / lib.webworker.d.ts (1360,5): ошибка TS2375: дубликат подписи индекса числа.node_modules / typescript / lib / lib.webworker.d.ts (1434,13): ошибка TS2403: последующие объявления переменных должны иметь одинаковый тип.Переменная 'FormData' должна иметь тип '{new (form ?: HTMLFormElement): FormData;прототип: FormData;} ', но здесь есть тип' {new (): FormData;прототип: FormData;}».node_modules / typescript / lib / lib.webworker.d.ts (2170,13): ошибка TS2403: последующие объявления переменных должны иметь одинаковый тип.Переменная «Уведомление» должна иметь тип «{new (title: string, options ?: NotificationOptions): Notification;прототип: уведомление;только чтение maxActions: число;разрешение только для чтения: NotificationPermission;requestPermission (deprecatedCallback ?: NotificationPermissionCallback): Promise <...>;} ', но здесь есть тип' {new (title: string, options ?: NotificationOptions): Notification;прототип: уведомление;только чтение maxActions: число;разрешение только для чтения: NotificationPermission;}».node_modules / typescript / lib / lib.webworker.d.ts (4322,13): ошибка TS2403: последующие объявления переменных должны иметь одинаковый тип.Переменная 'onmessage' должна иметь тип '(this: Window, ev: MessageEvent) => any', но здесь имеет тип '(this: DedicatedWorkerGlobalScope, ev: MessageEvent) => any'.node_modules / typescript / lib / lib.webworker.d.ts (4332,13): ошибка TS2403: последующие объявления переменных должны иметь одинаковый тип.Переменная 'location' должна иметь тип 'Location', но здесь имеет тип 'WorkerLocation'.node_modules / typescript / lib / lib.webworker.d.ts (4333,13): ошибка TS2403: последующие объявления переменных должны иметь одинаковый тип.Переменная 'onerror' должна иметь тип 'OnErrorEventHandlerNonNull', но здесь имеет тип '(this: DedicatedWorkerGlobalScope, ev: ErrorEvent) => any'.node_modules / typescript / lib / lib.webworker.d.ts (4335,13): ошибка TS2403: последующие объявления переменных должны иметь одинаковый тип.Переменная «self» должна иметь тип «Window», но здесь имеет тип «WorkerGlobalScope».node_modules / typescript / lib / lib.webworker.d.ts (4344,13): ошибка TS2403: последующие объявления переменных должны иметь одинаковый тип.Переменная 'навигатор' должна иметь тип 'Навигатор', но здесь имеет тип 'WorkerNavigator'.

У меня есть Refrence

https://angular.io/guide/web-worker

PS D:\angular-tour-of-heroes>  ng generate web-worker app
 CREATE tsconfig.worker.json (212 bytes)
 CREATE src/app/app.worker.ts (157 bytes)
 UPDATE src/tsconfig.app.json (295 bytes)
 UPDATE angular.json (4990 bytes)

app.component.ts

        if (typeof Worker !== 'undefined') {
          // Create a new
          const worker = new Worker('./app.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.
        }

app.worker.ts

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

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

tsworker.json

        {
          "extends": "./tsconfig.json",
          "compilerOptions": {
            "outDir": "./out-tsc/worker",
            "lib": [
              "es2018",
              "webworker"
            ],
            "types": []
          },
          "include": [
            "src/**/*.worker.ts"
          ]
        }

Tsconfig

            {
              "extends": "../tsconfig.json",
              "compilerOptions": {
                "outDir": "../out-tsc/app",
                "baseUrl": "./",
                "module": "es2015",
                "types": []
              },
              "exclude": [
                "test.ts",
                "**/*.spec.ts",
                "**/*.worker.ts"
              ]
            }

Angular Docs

Необходимо помнить о двух важных вещахпри использовании Web Workers в проектах Angular:

Некоторые среды или платформы, такие как @ angular / platform-server, используемые при рендеринге на стороне сервера, не поддерживают Web Workers.Вы должны предоставить резервный механизм для выполнения вычислений, которые рабочий будет выполнять, чтобы гарантировать, что ваше приложение будет работать в этих средах.

Запуск самого Angular в Web Worker через @ angular / platform-webworker пока не поддерживаетсяв Angular CLI.

            main.js:1305 Uncaught TypeError: Failed to construct 'Worker': Module scripts are not supported on DedicatedWorker yet. You can try the feature with '--enable-experimental-web-platform-features' flag (see https://crbug.com/680046)
                at Module../src/app/app.component.ts (main.js:1305)
                at __webpack_require__ (runtime.js:79)
                at Module../src/app/app.module.ngfactory.js (main.js:1332)
                at __webpack_require__ (runtime.js:79)
                at Module../src/main.ts (main.js:10012)
                at __webpack_require__ (runtime.js:79)
                at Object.0 (main.js:10034)
                at __webpack_require__ (runtime.js:79)
                at checkDeferredModules (runtime.js:46)
                at Array.webpackJsonpCallback [as push] (runtime.js:33)

• Кто-нибудь может подсказать, как решить эту проблему веб-работников.

Решение, которое сработало

1. В браузере Chrome введите веб-адрес chrome: //flags/.
2. Чтобы включить CSS-сетки, прокрутите вниз до функций Experimental Web Platform и выберите enable.
3. Relaunch Now.

Настройка браузера устранена, но ошибки по-прежнему присутствуют.

Answer 1

Можете ли вы опубликовать свой tsconfig.app.json здесь? Будет такая запись,

"exclude": [
        "src/**/*.worker.ts"
]

Измените его на

"exclude": [
        "**/*.worker.ts"
]

И если проблема не связана с инициализацией работника, вам нужно убедиться, что angular.json обновлен правильно и настроен для использования веб-работниками. Там будет запись для "webWokerTsConfig". Дважды проверьте это.

Наконец, мои конфигурационные файлы такие же, как в проекте, над которым работает веб-работник

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "**/*.worker.ts"
  ]
}

tsworker.worker.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "es2018",
      "webworker"
    ],
    "types": []
  },
  "include": [
    "src/**/*.worker.ts"
  ]
}

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

"webWorkerTsConfig": "tsconfig.worker.json"

А это

"tsConfig": [
          "src/tsconfig.app.json",
          "src/tsconfig.spec.json",
          "tsconfig.worker.json"
],

У меня была такая же проблема. Вы должны проверить ваши конфигурационные файлы. Это проблема в неправильной конфигурации. Дело не в браузере.