title: Web worker setup in Angular 7.0.1
body: <p>I am trying to do web-worker setup in my existing Angular 7.0.1 project (medium scale project). I did the setup after going through the following links:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/43276044/angular-cli-generated-app-with-web-workers/43276045#43276045">Web workers setup for Angular 4 app</a></li>
  <li>Webpack config change for Angular 6+ app - <a href="https://github.com/meltedspark/angular-builders/tree/master/packages/custom-webpack" rel="noreferrer">library</a> and <a href="https://codeburst.io/customizing-angular-cli-6-build-an-alternative-to-ng-eject-a48304cd3b21" rel="noreferrer">related article</a></li>
  </ul>
  
  <p>Here are my changes in each file:</p>
  
  <h3>./src/main.ts</h3>
  
  <pre><code>import 'zone.js';
  import { enableProdMode } from '@angular/core';
  import { bootstrapWorkerUi } from '@angular/platform-webworker';
  
  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';
  
  if (environment.production) {
    enableProdMode();
  }
  
  console.log("main.ts file loaded!");
  bootstrapWorkerUi('webworker.js');
  </code></pre>
  
  <h3>./src/workerLoader.ts</h3>
  
  <pre><code>import 'polyfills.ts';
  import '@angular/core';
  import '@angular/common';
  
  console.log("workerLoader.ts file loaded!");
  
  import { platformWorkerAppDynamic } from '@angular/platform-webworker-dynamic';
  import { AppModule } from './app/app.module';
  
  platformWorkerAppDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <h3>./angular.json</h3>
  
  <pre><code>"projects": {
    "[project name]": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js"
            }
            ...
            ...
          }
        }
      }
    }
  }
  </code></pre>
  
  <h3>./extra-webpack.config.js</h3>
  
  <pre><code>const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
      "entry": {
          "webworker": [
              "./src/workerLoader.ts"
          ]
      },
      "plugins": [
          new HtmlWebpackPlugin({
              "excludeChunks": [
                  "webworker"
              ],
          })
      ],
      "output": {
          "globalObject": 'this'
      }
  }
  </code></pre>
  
  <h3>./tsconfig.json</h3>
  
  <pre><code>{
      ...
      ...
      "angularCompilerOptions": {
          "entryModule": "./app/app.module#AppModule"
      }
  }
  </code></pre>
  
  <p>Here is the <a href="https://stackblitz.com/edit/angular-qx6gie" rel="noreferrer">demo</a>. You might want to check my <a href="https://gist.github.com/kamlekar/9abbcf480fe7ce36f13f76ba0400491e" rel="noreferrer">research notes</a>.</p>
  
  <p>I might be going in completely wrong direction because I just need to include and run a angular service worker library in Angular project (which should be super easy).</p>
  
  <p>My main intention of trying to include webworker is to let the web app run on multi-thread so that the animations, checkbox, custom dropdown and scroll effects on the screen performs smoothly.</p>