Webpack loader and "new Worker" syntax

[JCarlesVilaseca]

Used in Angular 10 application it needs to use another loader.

I would appreciate any help.

zip.js/lib/core/codecs/codec-pool-worker.js

Line 80 in 27663ae

workerData.worker = new Worker(new URL(workerData.scripts[0], import.meta.url));

ERROR in .../node_modules/@zip.js/zip.js/lib/core/codecs/codec-pool-worker.js 80:70
Module parse failed: Unexpected token (80:70)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       let messageTask;
|       if (!workerData.interface) {
>               workerData.worker = new Worker(new URL(workerData.scripts[0], import.meta.url));
|               workerData.worker.addEventListener(MESSAGE_EVENT_TYPE, onMessage, false);
|               workerData.interface = {

[gildas-lormeau]

Here is the procedure to integrate webpack-import-meta-loader in Angular 10 (copied from #191 (comment)).

1. Install the custom webpack builder: npm install -D @angular-builders/custom-webpack
2. Install the plugin to load metadata: npm install -D @open-wc/webpack-import-meta-loader
3. Edit your angular.json file:

"architect": {
      "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            },
  ...
      "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
  ...

4. Add a custom-webpack.config.js with the following content:

const webpack = require('webpack');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: require.resolve('@open-wc/webpack-import-meta-loader')
      }
    ]
  }
};

[bastyen]

"server": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            }