Search code examples
angularinternet-explorerangular8web-workerecmascript-5

Angular 8 web workers are broken in IE


Migrating from Angular 7 to 8 and discovered that the web-worker we had setup to run a background task is no longer executing when run in IE 11 (and presumably earlier). Edge, Chrome, all the others were fine just IE 11.

Devtools is complaining about syntax errors and referencing an es-2015.js file.


Solution

  • Angular 8 did away with the traditional polyfill techniques for compatibility with ES6+ and ES5 using differential builds to separate ES5 and ES6+ scripts. This works fine in the main app components, but web workers run their own processes in their own threads and no longer have access to the polyfillers.

    Ultimately the solution was a lot simpler than I thought it would be. Make sure the code inside web worker is ES5 compliant and it will run in IE.

    For our web worker that meant removing any arrow functions (=>) and replacing them with a traditional function declaration and string interpolation with old fashioned concatenation.

    // instead of 
    myClass.doSomething( myVar => { console.log(`Look what I have in ${myVar}` } );
    
    // do it old school
    myClass.doSomething( function (myVar) { console.log('Look what I have in ' + myVar } );
    

    (There were some other posts suggesting manually putting in the polyfill (here) but I couldn't quite get the polyfills to import and load successfully inside the web-worker.)