Web Apps and Web Workers that uses external scripts

Question

I am working on an Angular 13 application where at some point I need to use the (opus-recorder package) but I am not able to implement it.

The code crashes at this point, where I try to use the workers from the library mentioned in a Web Worker. The error i get is "Cannot read file from origin X" - The browser is blocking the use of the library that is local.

 `(...)

  import decoderPath from 'opus-recorder/dist/decoderWorker.min.js';
  import waveWorkerPath from 'opus-recorder/dist/waveWorker.min.js';

  (...)

  let decoderWorker = new Worker(new URL(decoderPath, import.meta.url));
  let wavWorker = new Worker(new URL(waveWorkerPath, import.meta.url));

  (...)`

On the library documentation itself it says that on a web app that uses webpack (that is the case), you should serve the workers as chunks as described here

and here is my custom webpack for angular:

`import type { Configuration } from 'webpack';
 module.exports = {
  module: {
   rules: [{
    test: /(encoderWorker|decoderWorker|waveWorker)\.min\.js$/,
    loader: 'file-loader'
   }]
  }} as Configuration;`

That does not work. I feel that this custom webpack is not detecting the import and therefore the code is trying to get the file from the folder itself, and not the served file.

Any ideas on how to solve this?

I've tried to follow the instructions in package and customize the angular webpack to serve this files as chunks in runtime, to be able to implement them in web workers dinamically, when required. But it did not work.