在 Angular 8 中使用 cli 命令添加 web worker 后出现错误答案

【问题标题】：Getting error after adding web worker with cli command in Angular 8在 Angular 8 中使用 cli 命令添加 web worker 后出现错误
【发布时间】：2019-10-17 02:46:22
【问题描述】：

Angular 8 为 Web Worker 添加了更好的支持。我没有运气让它工作。有人知道我在做什么错吗？

Here is official guide我关注了。

使用这个 cli 命令我生成了 web worker：

ng generate webWorker my-worker

cli 生成了 my-worker.worker.ts 文件和 tsconfig.worker.json 文件，并更新了以下文件：angular.json、tsconfig.app.json。

在此之后我得到以下错误：

ERROR in node_modules/typescript/lib/lib.dom.d.ts(25,1): error TS6200: Definitions of the following identifiers conflict with those in another file: EventListenerOrEventListenerObject, BlobPart, HeadersInit, BodyInit, RequestInfo, DOMHighResTimeStamp, CanvasImageSource, MessageEventSource, ImageBitmapSource, TimerHandler, PerformanceEntryList, VibratePattern, AlgorithmIdentifier, HashAlgorithmIdentifier, BigInteger, NamedCurve, GLenum, GLboolean, GLbitfield, GLint, GLsizei, GLintptr, GLsizeiptr, GLuint, GLfloat, GLclampf, TexImageSource, Float32List, Int32List, BufferSource, DOMTimeStamp, FormDataEntryValue, IDBValidKey, Transferable, BinaryType, ClientTypes, EndingType, IDBCursorDirection, IDBRequestReadyState, IDBTransactionMode, KeyFormat, KeyType, KeyUsage, NotificationDirection, NotificationPermission, PushEncryptionKeyName, PushPermissionState, ReferrerPolicy, RequestCache, RequestCredentials, RequestDestination, RequestMode, RequestRedirect, ResponseType, ServiceWorkerState, ServiceWorkerUpdateViaCache, VisibilityState, WebGLPowerPreference, WorkerType, XMLHttpRequestResponseType
node_modules/typescript/lib/lib.dom.d.ts(3473,5): error TS2687: All declarations of 'privateKey' must have identical modifiers.
node_modules/typescript/lib/lib.dom.d.ts(3474,5): error TS2687: All declarations of 'publicKey' must have identical modifiers.
node_modules/typescript/lib/lib.webworker.d.ts(25,1): error TS6200: Definitions of the following identifiers conflict with those in another file: EventListenerOrEventListenerObject, BlobPart, HeadersInit, BodyInit, RequestInfo, DOMHighResTimeStamp, CanvasImageSource, MessageEventSource, ImageBitmapSource, TimerHandler, PerformanceEntryList, VibratePattern, AlgorithmIdentifier, HashAlgorithmIdentifier, BigInteger, NamedCurve, GLenum, GLboolean, GLbitfield, GLint, GLsizei, GLintptr, GLsizeiptr, GLuint, GLfloat, GLclampf, TexImageSource, Float32List, Int32List, BufferSource, DOMTimeStamp, FormDataEntryValue, IDBValidKey, Transferable, BinaryType, ClientTypes, EndingType, IDBCursorDirection, IDBRequestReadyState, IDBTransactionMode, KeyFormat, KeyType, KeyUsage, NotificationDirection, NotificationPermission, PushEncryptionKeyName, PushPermissionState, ReferrerPolicy, RequestCache, RequestCredentials, RequestDestination, RequestMode, RequestRedirect, ResponseType, ServiceWorkerState, ServiceWorkerUpdateViaCache, VisibilityState, WebGLPowerPreference, WorkerType, XMLHttpRequestResponseType
node_modules/typescript/lib/lib.webworker.d.ts(85,5): error TS2687: All declarations of 'privateKey' must have identical modifiers.
node_modules/typescript/lib/lib.webworker.d.ts(86,5): error TS2687: All declarations of 'publicKey' must have identical modifiers.
node_modules/typescript/lib/lib.webworker.d.ts(1074,5): error TS2375: Duplicate number index signature.
node_modules/typescript/lib/lib.webworker.d.ts(1360,5): error TS2375: Duplicate number index signature.
node_modules/typescript/lib/lib.webworker.d.ts(1434,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'FormData' must be of type '{ new (form?: HTMLFormElement): FormData; prototype: FormData; }', but here has type '{ new (): FormData; prototype: FormData; }'.
node_modules/typescript/lib/lib.webworker.d.ts(2170,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'Notification' must be of type '{ new (title: string, options?: NotificationOptions): Notification; prototype: Notification; readonly maxActions: number; readonly permission: NotificationPermission; requestPermission(deprecatedCallback?: NotificationPermissionCallback): Promise<...>; }', but here has type '{ new (title: string, options?: NotificationOptions): Notification; prototype: Notification; readonly maxActions: number; readonly permission: NotificationPermission; }'.
node_modules/typescript/lib/lib.webworker.d.ts(4322,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'onmessage' must be of type '(this: Window, ev: MessageEvent) => any', but here has type '(this: DedicatedWorkerGlobalScope, ev: MessageEvent) => any'.
node_modules/typescript/lib/lib.webworker.d.ts(4332,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'location' must be of type 'Location', but here has type 'WorkerLocation'.
node_modules/typescript/lib/lib.webworker.d.ts(4333,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'onerror' must be of type 'OnErrorEventHandlerNonNull', but here has type '(this: DedicatedWorkerGlobalScope, ev: ErrorEvent) => any'.
node_modules/typescript/lib/lib.webworker.d.ts(4335,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'self' must be of type 'Window', but here has type 'WorkerGlobalScope'.
node_modules/typescript/lib/lib.webworker.d.ts(4344,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'navigator' must be of type 'Navigator', but here has type 'WorkerNavigator'.

这是我的 package.json 文件：

    {
  "name": "app-name",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.0.0",
    "@angular/cdk": "^8.0.0",
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/fire": "^5.1.3",
    "@angular/forms": "^8.0.0",
    "@angular/material": "^8.0.0",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/router": "^8.0.0",
    "bootstrap": "^4.3.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "firebase": "^5.11.1",
    "hammerjs": "^2.0.8",
    "material-design-icons": "^3.0.1",
    "rxjs": "^6.5.2",
    "save": "^2.3.3",
    "smoothscroll-polyfill": "^0.4.3",
    "tslib": "^1.9.0",
    "web-animations-js": "github:angular/web-animations-js#release_pr208",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.1",
    "@angular/cli": "^8.0.1",
    "@angular/compiler-cli": "^8.0.0",
    "@angular/language-service": "^8.0.0",
    "@types/jasmine": "~3.3.0",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~12.0.3",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.0.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.4",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.1",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0",
    "typescript": "^3.4.5"
  }
}

谢谢。

【问题讨论】：

我没有收到这个错误。工人运行良好。
你使用什么打字稿版本？
"typescript": "~3.4.3" 和 v10.16.0 的节点。
尝试了一个新项目并且它确实有效，但对于我的主要项目它只是不起作用。还创建了一个新项目并复制了 src 文件夹，仍然无法正常工作。不知道去哪里找（

标签： javascript angular web-worker angular8

【解决方案1】：

如果您使用的是 SSR（服务器端渲染），请不要忘记排除 *.worker.tsintsconfig.server.json`：

  "exclude": ["test.ts", "**/*.spec.ts", "**/*.worker.ts"],

【讨论】：

【解决方案2】：

我遇到了同样的问题。使用来自https://github.com/angular/angular-cli/issues/14737的解决方案解决了它

【讨论】：

【解决方案3】：

我也有这个问题，注意到在一个新的Angular 8项目中，所有tsconfig.*.json文件都在根目录下，只有tslint.json根目录。

这就是我所做的：

已将 tslint.json、tsconfig.app.json 和 tsconfig.spec.json 从新生成的 CLI 8 项目复制到我的项目根目录。
从src 目录中删除了tslint.json、tsconfig.app.json 和tsconfig.spec.json。
编辑了angular.json 中的tsConfig 值，以便在项目根目录而不是src 目录中查找tsconfig 文件。

如果您对 CLI 生成的 tsconfig 文件进行了任何修改，将它们从 src 移动到根目录并编辑其中的路径可能会更容易。我没有更改生成的文件，所以我只是从一个新项目中复制。

我不知道生成 Web Worker 和添加 tsconfig.worker.json 会在升级的 Angular 项目中引发麻烦。从 7 升级工作正常，直到我添加了一个工人。

【讨论】：

对了，忘了说我在这些步骤之后运行了ng generate webWorker 命令。如果您已经运行了 generate worker 命令，则需要将"src/**/*.worker.ts" 添加到tsconfig.app.json 中的exclude 数组中。
我遵循了这个说明，它几乎奏效了。我要做的就是将"webWorkerTsConfig": "tsconfig.worker.json" 添加到architect.build.options。请注意，tsconfig.worker.json 的值也必须添加到architect.lint.options.tsConfig（它在angular.json 中出现两次）。