I have been experimenting with incorporating tensorflow/tfjs (TF) into a web-worker within an angular project.
The process of creating a web-worker using the ng generate worker command has been successful.
Importing TF in a component works without any issues.
However, I encountered errors when attempting to import TF in the worker like this:
import * as tf from '@tensorflow/tfjs'This resulted in a series of missing definition errors during the build process using the ng build command. The missing types were related to DOM elements such as
error TS2304: Cannot find name ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElementAlthough my use of TF does not require these types, I still needed to find a way to successfully build my worker.
I decided to modify the tsconfig.worker.json file in an attempt to resolve the issue. My initial approach was to include "dom" in the compilerOptions.lib array:
["es2018", "webworker"] replaced with
["es2018", "webworker", "dom"]However, this led to conflicting type definitions:
error TS6200: Definitions of the following identifiers conflict with those in another file The webworker and dom libraries have conflicting definitions for the same types, and removing the webworker lib reference is not an option.
For my second attempt, I added the skipTypeCheck compiler option in the tsconfig.worker.json file:
This approach worked successfully; I was able to run TF in my web worker and generate results.
However, skipping type checking undermines the purpose of using TypeScript. Therefore, my question is:
Is there a more elegant way to integrate TF into a web-worker in angular while maintaining type checking integrity?
Thank you for your responses. Please inform me if additional configuration details are required.