Custom Webpack config for platform-webworker or worker-loader

Hello,

I have to run some angular code inside a separated thread. With ng eject being currently disabled, is it possible to use angular-cli-builders in order modify the webpack configuration to use platform-webworker or worker-loader ?

Example: webpack config proposed for worker-loader: // webpack.config.js { module: { rules: [ { test: /\.worker\.js$/, use: { loader: 'worker-loader' } } ] } }

[hoefling]

I can confirm the configuration provided here works, applied it to my project just now. The only thing I had to enhance was absolutizing the path to the entryModule in the AotPlugin configuration:

new AotPlugin({
        "entryModule": path.join(__dirname, 'src/app/app.module#AppModule'),

otherwise I kept getting build errors, with complaints that the app/app.module can’t be found. Other than that, it just works! Great job and many thanks @Ajyress!

[Ajyress]

My final configuration:

angular.json:

//... some stuff...
"build": {
          "builder": "angular-cli-builders:custom-webpack-browser",
          "options": {
            "customWebpackConfig": {
               "path": "./extra-webpack.config.js",
               "replaceDuplicatePlugins": true,
               "mergeStrategies": {"optimization":"replace"}
            },
            //... some stuff...
"serve": {
          "builder": "angular-cli-builders:generic-dev-server",
          "options": {
            "browserTarget": "myWorkerApp:build"
          },
//... some stuff...

extra-webpack.config.js:

const path = require('path');

const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];

const HtmlWebpackPlugin = require('html-webpack-plugin');
const AotPlugin = require('@ngtools/webpack').AngularCompilerPlugin;


module.exports = {
    target : "web",
    "entry": {
      "main": [
        "./src/main.ts"
      ],
      "polyfills": [
        "./src/polyfills.ts"
      ],
      "styles": [
        "./src/styles.css"
      ],
      "webworker": [
        "./src/workerLoader.ts"
      ]
    },
    "output": {
      "path": path.join(process.cwd(), "dist"),
      "filename": "[name].bundle.js",
      "chunkFilename": "[id].chunk.js"
    },
    "module": { },
    "plugins": [
      new HtmlWebpackPlugin({
        "template": "./src/index.html",
        "filename": "./index.html",
        "hash": false,
        "inject": true,
        "compile": true,
        "favicon": false,
        "minify": false,
        "cache": true,
        "showErrors": true,
        "chunks": "all",
        "xhtml": true,
        "excludeChunks": [
          "webworker"
        ],
        "title": "Webpack App",
        "chunksSortMode": function sort(left, right) {
          let leftIndex = entryPoints.indexOf(left.names[0]);
          let rightIndex = entryPoints.indexOf(right.names[0]);
          if (leftIndex > rightIndex) {
            return 1;
          }
          else if (leftIndex < rightIndex) {
            return -1;
          }
          else {
            return 0;
          }
        }
      }),
      new AotPlugin({
        "mainPath": "main.ts",
        "entryModule": 'src/app/app.module#AppModule',
        "hostReplacementPaths": {
          "environments/environment.ts": "environments/environment.ts"
        },
        "exclude": [],
        "tsConfigPath": "src/tsconfig.app.json",
        "skipCodeGeneration": true
      })
    ],
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendor: {
            name: 'vendor',
            test: /\/node_modules\//,
            chunks: 'all',
            priority: 0,
            enforce: true,
          },
        },
      },
    },
  };

I’m still new to wepback, I can’t tell this configuration is optimal or not but it works