在Angular 8中使用cli命令添加Web Worker后出现错误 [英] Getting error after adding web worker with cli command in Angular 8

问题描述

Angular 8为Web worker添加了更好的支持.我没有运气能使它工作.有人知道我在做什么错吗?

Angular 8 has added a better support for web workers. I had no luck to get it working. Does someone know what am i doing wrong?

这是我的官方指南.

使用此cli命令，我生成了网络工作者:

With this cli command i generated web worker:

ng generate webWorker my-worker

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

cli has generated my-worker.worker.ts file and tsconfig.worker.json file, and updated following files: 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文件:

Here is my package.json file:

    {
  "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"
  }
}

谢谢.

推荐答案

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

I had this issue too, and noticed that in a new Angular 8 project, all tsconfig.*.json files are in the root directory, and there is only the root tslint.json file.

这就是我所做的:

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

• Copied tslint.json, tsconfig.app.json, and tsconfig.spec.json from a newly generated CLI 8 project to my project root.
• Deleted tslint.json, tsconfig.app.json, and tsconfig.spec.json from the src directory.
• Edited tsConfig values in angular.json to look for tsconfig files in project root, instead of in src directory.

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

If you made any modifications to the tsconfig files generated by the CLI, it might be easier to move them from src to the root, and edit the paths in them. I didn't change the generated files, so I just copied from a new project.

我不知道生成Web Worker和添加tsconfig.worker.json是什么，这在升级的Angular项目中会产生麻烦.从7升级可以正常工作，直到我添加一个工作程序为止.

I have no idea what it is about generating a Web Worker and the addition of the tsconfig.worker.json that throws a wrench in an upgraded Angular project. Upgrading from 7 worked fine until I added a worker.

这篇关于在Angular 8中使用cli命令添加Web Worker后出现错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！