Angular CLI production build - Trying to reference FormData using a polyfill - does a webworker have access to pollyfills.js file? - if not how to import the pollyfills file - it is named with a hash code

[dcs3spp]

Hi,

I have generated a test application on GitHub @ https://github.com/dcs3spp/Angular-WebWorker-Temp for the following query.

This is a temporary Angular CLI project that references FormData in a web worker (webworker/worker.js). Chromium and Firefox allow the use of FormData for sending multipart form data. However, Safari does not appear to allow this.

Subsequently, I have installed the formdata polyfill, available at https://www.npmjs.com/package/formdata-polyfill. The documentation suggests that the pollyfill can be included in the web worker to provide access to FormData. However, when triggering a production build (ng build --prod) the polyfill is generated with a hash, e.g. polyfills.8cc9cadb24fdd97af199.js. 

This is located in a script tag within index.html. However, the Web Worker still does not recognised the reference to FormData.  

Does this mean that I have to use an importScripts statement within the Web Worker to import the polyfill generated by Angular CLI? If so, how can I achieve this from a production build when the chunk hash is dynamic, i.e. changes per build.

Cheers

dcs3spp

[Sander Elias]

Hi dcs3spp,

Your web-worker is a separate application that you are serving alongside your angular app. If it needs a single 3rth party script, the easy solution is to put that script in `assets` and reference from there. If your web-worker is getting more complex, you might have to set up some build-tools for that, separate from the CLI.

Regards

Sander

[dcs3spp]

Hi Sander,

Thanks for responding. Just realised I have not pushed commit to repository, so complete source code available now.

Ahhh, so web workers run in a separate process from the angular app, i.e. the scripts loaded in index.html of the angular app, including pollyfills, are not visible to web workers?

I have stored the web worker in a static folder so that it can be loaded from the Angular app, i.e. `let w : Worker = new Worker ('/webworkers/worker.js');`  

So, does that mean that I would have to extract the scripts from node modules for formdata-polyfill and store them in the static webworkers folder. Subsequently, I then reference them from the web worker using importScripts if the browser is safari?

Regards

Simon

[Sander Elias]

Euhm, 

Yes. ;)

Regards

Sander

[dcs3spp]

lol, ok, got it :)

On Friday, 1 June 2018 13:41:28 UTC+1, Sander Elias wrote:

Euhm, 

Yes. ;)

Regards

Sander

[dcs3spp]

Figured it out.

Copied formdata.min.js at build time (modified angular.json) and if the browser is safari the webworker will import formdata.min.js. Used bowser library for browser detection.

When click on the Spawn Web Worker button it will append `running from Safari` to the console.

Thanks again for help.

Regards

Simon