polyfills for an angular app, with web worker created from the CLI

Question

I have an app that requires heavy filtering of data on the client side which is why it is essential to use web workers to keep the UI smooth. I've got a web worker working for one of my filters and I'm having issues with IE where my typescript does not compile down to es5 for the web worker.

I've read online and on stack that because web workers will run on a separate execution context that they will not have access to angular's polyfills.

I know that my web worker IS running in IE11 because i can log on the web worker context and see it in the console. I am also getting this error meaning that my ts did not get converting to the right version of js.

Error from worker

What i've tried is manually including the polyfill for that specific error from Mozilla's documentation and it did not work.

If anyone has any insight on this, it would be greatly appreciated :D

this is my tsconfig for my worker

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "ES2018",
      "webworker"
    ],
    "target": "es5",
    "types": []
  },
  "include": [
    "src/**/*.worker.ts"
  ]
}

this is my global tsconfig file for the angular app

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types",
      "node"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "resolveJsonModule": true,
  }
}

and this is my worker that does some filtering

/// <reference lib="webworker" />

addEventListener('message', ({ data }) => {

  let filteredData = data[0];
  const params = data[1];
  const excludedFilters = ['level', 'sol_id', 'dac_name'];
  const location = params['dac_name'];

  for (let param of Object.entries(params)) {
    const key = param[0] as string;
    const val = param[1] as string;

    if (!excludedFilters.includes(key)) {
      filteredData = data[0].filter(obj => obj[key] === val)
    }
  }

  if (location) {
    if (location != 'All Data Centres') {
      filteredData = filteredData.filter(obj => obj['dac_name'] === location)
    }
  }

  postMessage(filteredData)
});

EDIT: After including the polyfills manually, in IE11 I get this error: new Error

The error now says worker.ts instead of worker.js

Answer 1

From the error message, it seems that perhaps the worker.js use Object.entries method. Based on the Object.entries() document, we can see that the entries method doesn't support IE browser.

To use it with IE Browser, you can use any of the following:

1. Adding this line to polyfill.ts (if the core-js folder doesn't contain es7, please refer to this link to update core-js):

   import 'core-js/es7/object';
   

2. Adding the following script in the header of Index.html.

   <script>
   if (!Object.entries) {
     Object.entries = function( obj ){
       var ownProps = Object.keys( obj ),
           i = ownProps.length,
           resArray = new Array(i); // preallocate the Array
       while (i--)
         resArray[i] = [ownProps[i], obj[ownProps[i]]];
   
       return resArray;
     };
   }
   </script>