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，HashAlgorithmIdentifier，BigInteger，NamedCurve，GLenum，GLboolean，GLbitfield，GLint，GLsizei，GLintptr，GLsizeiptr，Gloint，GLInt，Lint，GLtint，ListInt，Lint，，FormDataEntryValue，IDBValidKey，Transferable，BinaryType，ClientTypes，EndingType，IDBCursorDirection，IDBRequestReadyState，IDBTransactionMode，KeyFormat，KeyType，KeyUsage，NotificationDirection，NotificationPermission，PushEncryptionKeyName，PushPermissionState，RefererPolicy，RequestCache，RequestCredentials，RequestMode，RequestMode， 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，MessageEventSource， ImageBitmapSource，TimerHandler，PerformanceEntryList，VibratePattern，AlgorithmIdentifier，HashAlgorithmIdentifier，BigInteger，NamedCurve，GLenum，GLboolean，GLbitfield，GLint，GLsizei，GLintptr，GLsizeiptr，GLutt，GLfloat，GLSource，ValidType，ValidSource，GLSource，TypeData，ValidSource，FormList Transferable，BinaryType，ClientType，EndingType，IDBCursorDirection，IDBRequestReadyState，IDBTransactionMode，KeyFormat，KeyType，KeyUsage，NotificationDirection，NotificationPermission，PushEncryptionKeyName，PushPermissionState，RefererPolicy，RequestCache，RequestCredentials，RequestDestination，RequestMode，RequestRedirectState，ResponseType，ServiceType 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：后续变量声明必须具有相同的类型。变量“ Notification”的类型必须为“ {new（标题：字符串，选项？：NotificationOptions）：通知；原型：通知； maxonlys只读：数字；只读权限：NotificationPermission; requestPermission（deprecatedCallback ?: NotificationPermissionCallback）：承诺<...>; }”，但此处的类型为“ {new（标题：字符串，选项？：NotificationOptions）：通知；原型：通知； maxonlys只读：数字；只读权限：NotificationPermission; }'。 node_modules / typescript / lib / lib.webworker.d.ts（4322,13）：错误TS2403：后续变量声明必须具有相同的类型。变量“ onmessage”的类型必须为“（this：Window，ev：MessageEvent）=>任何”，但此处的类型为“（this：DedicatedWorkerGlobalScope，ev：MessageEvent）=>任何”。 node_modules / typescript / lib / lib.webworker.d.ts（4332,13）：错误TS2403：后续变量声明必须具有相同的类型。变量“位置”必须为“位置”类型，但此处为“ WorkerLocation”类型。 node_modules / typescript / lib / lib.webworker.d.ts（4333,13）：错误TS2403：后续变量声明必须具有相同的类型。变量“ onerror”必须为“ OnErrorEventHandlerNonNull”类型，但这里的类型为'（this：DedicatedWorkerGlobalScope，ev：ErrorEvent）=>任何'。 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

在Angular项目中使用Web Worker时要牢记两点：

某些环境或平台（例如服务器端渲染中使用的@ 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网格，请向下滚动到“实验性Web平台”功能并选择启用。
立即重新启动。

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

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在您要配置Webworkers的项目工作区中应该有这样的条目。

"webWorkerTsConfig": "tsconfig.worker.json"

还有这个

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

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

Answer 2

您需要停止并重新启动应用程序，新设置才能生效。在此之前，您将获得该浏览器错误。

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

2 个答案: