Getting error after adding web worker with cli command in Angular 8

Question

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?

Here is official guide i followed.

With this cli command i generated web worker:

ng generate webWorker my-worker

cli has generated my-worker.worker.ts file and tsconfig.worker.json file, and updated following files: angular.json, tsconfig.app.json.

After this im getting following error:

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

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

Thanks.

Tried with a fresh project and it did work, but with my main project it just doesn't work. Also created a new project and copied src folder, still doesnt work. Don't know where to look ( — Katran
– Katran, Commented May 31, 2019 at 14:30

drewsign · Accepted Answer · 2019-05-31 19:20:07Z

5

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.

Here's what I did:

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.

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.

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.

answered May 31, 2019 at 19:20

drewsign

5165 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

drewsign Over a year ago

Right, forgot to mention that I ran the ng generate webWorker command after these steps. If you've already run the generate worker command, you'll need to add "src/**/*.worker.ts" to the exclude array in tsconfig.app.json.

Jane Wayne Over a year ago

I followed this instruction and it almost worked. What I had to do was add "webWorkerTsConfig": "tsconfig.worker.json" to the architect.build.options. Note that the value tsconfig.worker.json also must be added to architect.lint.options.tsConfig too (it shows up twice in angular.json).

VIBrunazo · Accepted Answer · 2019-06-16 03:20:31Z

2

I had this same problem. Solved it with the solution from: https://github.com/angular/angular-cli/issues/14737

answered Jun 16, 2019 at 3:20

VIBrunazo

1,74816 silver badges22 bronze badges

Comments

6be709c0 · Accepted Answer · 2019-08-22 08:13:40Z

0

If you're using SSR (Server side rendering) don't forget to also exclude *.worker.tsintsconfig.server.json`:

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

answered Aug 22, 2019 at 8:13

6be709c0

8,5014 gold badges40 silver badges53 bronze badges

Comments

Pipo · Accepted Answer · 2024-03-14 19:36:36Z

0

I was missing probably from migrations

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

into tsconfig.app.json file

Leading me to the following error

Error: C:\<...>.worker.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.   
Error: error TS18003: No inputs were found in config file 


C:/<...>/src/tsconfig.worker.json'. Specified 'include' paths were '["src/**/*.worker.ts"]' and 'exclude' paths were '["../out-tsc/worker"]'.

answered Mar 14, 2024 at 19:36

Pipo

5,1831 gold badge44 silver badges52 bronze badges

Collectives™ on Stack Overflow

Getting error after adding web worker with cli command in Angular 8

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related