V
V
Vadim2019-12-17 13:21:08
JavaScript
Vadim, 2019-12-17 13:21:08

How to add a Web Worker to a project with Angular4.3?

Good afternoon! The project uses this assembly but its previous version for Angular 4.3. There was a need to add a Web Worker to put the functionality for creating an excel table into a separate thread, there is a lot of data, the output is a table of 30 MB and all this is done on the client, if everything is done in one thread, everything is blocked until the operation ends. The problem is that I can't add the worker file to the webpack config for it to work.
The worker code is still simple to just run, but there you will need to import the module to work with excel.

(function() {
  const self = this;

  self.onmessage = function(e) {
    console.log(e.data);
    self.postMessage('Process complete!');
  };
})();

In webpack.common.js add an entry for the worker, in HtmlWebpackPlugin add an exception for the worker:
entry: {
      polyfills: './src/polyfills.browser.ts',
      main: AOT ? './src/main.browser.aot.ts' : './src/main.browser.ts',
      exportworker: './src/app/components/folder/folder/folder/export.worker.ts'
    },
new HtmlWebpackPlugin({
        template: 'src/index.html',
        title: METADATA.title,
        chunksSortMode: 'dependency',
        metadata: METADATA,
        inject: 'head',
        excludeChunks: ['exportworker']
      })

But when I run webpack-dev-server I get an error:
exportworker.bundle.js:2 Uncaught ReferenceError: webpackJsonpac__name_ is not defined
at exportworker.bundle.js:2

Tell me what is the problem and how can I fix it so that the worker would work?
Worker code after webpack.
var ac_exportworker =
webpackJsonpac__name_([7],{

/***/ 1199:
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(55);
module.exports = __webpack_require__(324);


/***/ }),

/***/ 324:
/***/ (function(module, exports) {

(function () {
    var self = this;
    self.onmessage = function (e) {
        console.log(e.data);
        self.postMessage('Process complete!');
    };
})();


/***/ })

},[1199]);

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question