Core Angular objects not found building Web Worker in Angular V8

Question

I'm doing my first web worker in an Angular v8 project. I would like to have my web worker make HTTP service calls, just in that separate thread. Unfortunately, during the ng build process, I'm getting a compiler error as shown below. Especially for V6 code, I saw guidance suggesting messing with the webpack.

I wrote the code as though Angular compiles my Typescript code which references Angular imported services (backend only though) into a javascript file, puts it in the correct webpack (if that's even relevant), and the new webworker() constructor gets what it needs.

ERROR in ./src/app/modules/softlayer/bluereport-uploaders/report-uploader/softcopy-report-file-uploader.worker.ts (./node_modules/worker-plugin/dist/loader.js!./src/app/modules/softlayer/bluereport-uploaders/report-uploader/softcopy-report-file-uploader.worker.ts)
Module build failed (from ./node_modules/worker-plugin/dist/loader.js):
Error: node_modules/@angular/common/http/http.d.ts(1,1): error TS6053: File '/mnt/c/projects-new/cirrus-bluecost-rules-client/client/node_modules/@angular/common/http/http.ngfactory.ts' not found.
node_modules/@angular/core/core.d.ts(1,1): error TS6053: File '/mnt/c/projects-new/cirrus-bluecost-rules-client/client/node_modules/@angular/core/core.ngfactory.ts' not found.
node_modules/@angular/core/core.d.ts(1470,29): error TS2304: Cannot find name 'Element'.
node_modules/@angular/core/core.d.ts(1471,29): error TS2304: Cannot find name 'Element'.
node_modules/@angular/core/core.d.ts(1538,26): error TS2304: Cannot find name 'Node'.
node_modules/@angular/core/core.d.ts(1539,29): error TS2304: Cannot find name 'Node'.
node_modules/@angular/core/core.d.ts(6426,33): error TS2304: Cannot find name 'Node'.
node_modules/@angular/core/core.d.ts(9552,62): error TS2304: Cannot find name 'Element'.
node_modules/@angular/core/core.d.ts(9554,62): error TS2304: Cannot find name 'Node'.
node_modules/@angular/core/core.d.ts(9577,59): error TS2304: Cannot find name 'Element'.
node_modules/@angular/core/core.d.ts(10050,83): error TS2304: Cannot find name 'HTMLElement'.
node_modules/@angular/core/core.d.ts(13030,20): error TS2304: Cannot find name 'Document'.
node_modules/@angular/core/core.d.ts(13033,13): error TS2304: Cannot find name 'HTMLElement'.
node_modules/@angular/core/core.d.ts(13041,20): error TS2304: Cannot find name 'Document'.
node_modules/@angular/core/core.d.ts(13044,13): error TS2304: Cannot find name 'Document'.
node_modules/@angular/core/core.d.ts(13052,20): error TS2304: Cannot find name 'Document'.
node_modules/@angular/core/core.d.ts(13055,13): error TS2304: Cannot find name 'Window'.
src/app/core/services/softlayer.service.ts(1,1): error TS6053: File '/mnt/c/projects-new/cirrus-bluecost-rules-client/client/src/app/core/services/softlayer.service.ngfactory.ts' not found.
src/app/modules/softlayer/bluereport-uploaders/report-uploader/softcopy-report-file-uploader.worker.ts(16,37): error TS2339: Property 'data' does not exist on type 'Event'.

    at AngularCompilerPlugin._update (/mnt/c/projects-new/cirrus-bluecost-rules-client/client/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:776:31)
    at runMicrotasks ()
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async AngularCompilerPlugin._make (/mnt/c/projects-new/cirrus-bluecost-rules-client/client/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:667:13)

My web worker file is:

/// 
import { SoftlayerService } from '../../../../core/services/softlayer.service';
import { SpringBatchJobExecutionStatus } from '../../../../shared/models/SpringBatchJobExecutionStatus';

function sleep(ms: number) {
    return new Promise((resolve) => {
        setTimeout(resolve, ms);
    });
}

function postMessageWithLog(message: SpringBatchJobExecutionStatus) {
    console.log('Sending message back: ' + JSON.stringify(message));
    postMessage(message);
}

self.addEventListener('message', ({ data }) => {
    console.log('@@@ Begin addEventListener');
    const softLayerService: SoftlayerService = data['softlayerService'];
    const files: FileList = data['files'];
    (async () => {
        softLayerService.postAsyncFiles(files.item(0))
            .subscribe((postAsyncFilesData: SpringBatchJobExecutionStatus) => {
                console.log('@@@ http success handler for postAsyncFiles');
                postAsyncFilesData.httpRequestSuccessful = true;
                postMessageWithLog(postAsyncFilesData);

                if (postAsyncFilesData.exitStatus === 'RUNNING' || postAsyncFilesData.batchStatus === 'STARTING') {
                    console.log('Beginning jobExecutionResult fetch loop');
                    let errorDetected = false;``
                    let jobExecutionResult = postAsyncFilesData;
                    while (jobExecutionResult.batchStatus === 'RUNNING' ||
                        jobExecutionResult.batchStatus === 'STARTING' &&
                        !errorDetected) {
                        console.log('@@@ jobExecutionResult=' + JSON.stringify(jobExecutionResult));
                        postMessageWithLog(jobExecutionResult);
                        console.log('Before sleep');
                        sleep(10000);
                        console.log('After sleep');
                        softLayerService.getAsyncFiles(jobExecutionResult.jobInstanceId, jobExecutionResult.jobExecutionId).subscribe(
                            (getAsyncFilesData: SpringBatchJobExecutionStatus) => {
                                jobExecutionResult = getAsyncFilesData;
                                postMessageWithLog(jobExecutionResult);
                            },
                            (error) => {
                                console.log('Error getting job execution status ' + error);
                                let errorBlock = new SpringBatchJobExecutionStatus();
                                errorBlock.httpRequestSuccessful = false;
                                postMessageWithLog(errorBlock);
                                errorDetected = true;
                            }
                        );
                        console.log('After end jobExecutionResult fetch loop');
                    } /* end while */

                } else {
                    let errorBlock = postAsyncFilesData;
                    errorBlock.httpRequestSuccessful = false;
                    console.log('Not entering check loop batchStatus=' +
                        errorBlock.batchStatus +
                        ' exitStatus=' + errorBlock.exitStatus);
                    postMessageWithLog(errorBlock);
                }

            },
                (error) => {
                    let errorBlock = new SpringBatchJobExecutionStatus();
                    errorBlock.httpRequestSuccessful = false;
                    postMessageWithLog(errorBlock);
                });

    }
    )();
    console.log('@@@ addEventListener(...): worker ended');
});

Please excuse the console.log statements. Most of them will be removed once the key aspects of this have been tested.

The SoftlayerService class contains methods that (eventually) make RESTful calls via RXJS.

Core Angular objects not found building Web Worker in Angular V8

Answers (1)

Related Questions