angular - 无法构造“Worker”：Angular 8 中的 DedicatedWorker 尚不支持模块脚本

问题描述

错误

PushPermissionState、ReferrerPolicy、RequestCache、RequestCredentials、RequestDestination、RequestMode、RequestRedirect、ResponseType、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、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：后续变量声明必须具有相同的类型。变量 'Notification' 必须是类型 '{ new (title: string, options?: NotificationOptions): Notification; 原型：通知；只读 maxActions: number; 只读权限：NotificationPermission；requestPermission(deprecatedCallback?: NotificationPermissionCallback): Promise<...>; }'，但这里有类型 '{ new (title: string, options?: NotificationOptions): Notification; 原型：通知；只读 maxActions: number; 只读权限：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：后续变量声明必须具有相同的类型。变量“navigator”必须是“Navigator”类型，但这里有“WorkerNavigator”类型。后续的变量声明必须具有相同的类型。变量“navigator”必须是“Navigator”类型，但这里有“WorkerNavigator”类型。后续的变量声明必须具有相同的类型。变量“navigator”必须是“Navigator”类型，但这里有“WorkerNavigator”类型。

我有参考

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.
        }

应用程序.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"
          ]
        }

配置

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

角度文档

在 Angular 项目中使用 Web Workers 时，有两点需要牢记：

某些环境或平台，例如在服务器端渲染中使用的 @angular/platform-server，不支持 Web Workers。您必须提供一种备用机制来执行工作人员将执行的计算，以确保您的应用程序能够在这些环境中工作。

Angular CLI 尚不支持通过 @angular/platform-webworker 在 Web Worker 中运行 Angular 本身。

            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)

任何人都可以指导如何解决这个网络工作者问题。

有效的解决方案

在 Chrome 浏览器中，输入网址 chrome://flags/。
要打开 CSS 网格，请向下滚动到 Experimental Web Platform features 并选择 enable。
现在重启。

浏览器设置已解决，但仍然存在错误。

标签： angulartypescriptgoogle-chromeweb-workerangular8

解决方案

你可以在这里发布你的 tsconfig.app.json 吗？会有这样的条目，

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

改成，

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

对于 worker 未初始化问题，您需要确保 angular.json 已正确更新并配置为使用 webworkers。将有一个“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 在您尝试配置 webworkers 的项目工作区中应该有这样的条目。

"webWorkerTsConfig": "tsconfig.worker.json"

和这个

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

我遇到过同样的问题。你必须检查你的配置文件。这是配置错误的问题。这与浏览器无关。

angular - 无法构造“Worker”：Angular 8 中的 DedicatedWorker 尚不支持模块脚本

问题描述

解决方案

推荐阅读