Angular 6 Failed to execute 'postMessage' on 'Worker'

Hello, I’ve been trying to use this example to make comlinkjs work in Angular: https://medium.com/lacolaco-blog/enjoyable-webworkers-in-angular-41cfeb0e6519 (example is working when checked out: example

However I can’t seem to replicate the example and I always get this error in my project

ERROR Error: Uncaught (in promise): DataCloneError: Failed to execute 'postMessage' on 'Worker': Symbol(Symbol.toPrimitive) could not be cloned.
Error: Failed to execute 'postMessage' on 'Worker': Symbol(Symbol.toPrimitive) could not be cloned.

Here is my setup

//generate-data-worker.ts

import { expose } from 'comlinkjs';

export class GenerateData {
  generateData(source: string) {
    return new Promise((resolve, reject) => {
      resolve( "TEST" );
    });
  }
}

expose({GenerateData}, self);

//generate-data.service.ts
import {Injectable} from '@angular/core';
import {proxy} from 'comlinkjs';


const GenerateDataWokrer = proxy<
  typeof import('../worker/generate-data').GenerateData
  >(
  new (Worker as any)('../worker/generate-data', { type: 'module' })
);

@Injectable({
  providedIn: 'root'
})
export class GenerateDataService {
  async generateData(source: string): Promise<any> {
    const worker = await new GenerateDataWokrer();
    return await worker.generateData(source);
  }
}

calling it as:

this.genDataService.generateData(``).then((value) => {
      console.log(value)
    });

Can you help me understand from where is the error coming from?

[kzmv]

Thank you for clarifying. I’m unable to reproduce the problem in a standalone project (it works there).

I believe this is some underlying angular configuration on my side. Let’s close the issue and I will respond when I find a solution.

[sansato]

No, it’s a React app, plain javascript through comlink for some share with >1 browser tabs.