Referencing FormData from Safari webworker from a production build about formdata HOT 7 CLOSED

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

from formdata.

I didn't see the formdata in your repo, did you push your code?
You don't have to use importScript as long as it's with your bundle.

could be that my code fails to find the global scope inside of your context:

const global = typeof window === 'object'
    ? window : typeof self === 'object'
    ? self : this

from formdata.

When triggering a production build (ng build --prod) angular polyfills, including formdata-polyfill, are 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 recognise the reference to FormData.

other context such as workers and iframe will not get the polyfills if you polyfill the main thread. the polyfill has do be included in the other contexts as well

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 dynamically generated per build?

I guess you have to use importScript to include the polyfills.js but you can maybe also bundle it together with webworker/worker.js

from formdata.

Thanks for responding. Ooops, I did not push the code. Apologies, thanks for highlighting :) Should be available now.

Ahhhhhh, 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 polyfill bundle, are not visible to web workers.

The problem is that Angular CLI employs a hash naming scheme for bundle files when running a production build, e.g. polyfills.8cc9cadb24fdd97af199.js. Just ran another production build. The generated hash is static for production build. For a development build, the build uses no hash, i.e. polyfills.js. If I went down the polyfills route, how could I distinguish between a production and development build?

I guess you have to use importScript to include the polyfills.js but you can maybe also bundle it together with webworker/worker.js

Do you mean copy the formdata-polyfill code into webworker/worker.js or do you mean produce a separate bundle file, similar to that achieved using webpack, that includes the webworker and code from from formdata-polyfill?

from formdata.

Whatever you want, copy it or make a new bundle. Whatever works best for you

from formdata.

Ok, cheers for responses.

Probably easier to copy formdata-pollyfill source into webworker folder and have the webworker reference it using importScripts. That way would not have to distinguish between a development build and a production build for importing the polyfill with/without hash in filename.

Would have to research creating new bundle further. Could maybe, use the static asset approach to import the web worker from angular code, e.g. let w : Worker = new Worker ('/webworkers/worker.js); and copy the formdata.min.js source from node_modules/form-data-polyfill into same folder as webworker during build time.

Thanks again for responses. Appreciated :)

from formdata.

Good for you

from formdata.