Angular - webpack config for web worker in angular6

Question

i tried to run my angular6 web application in a web worker as described here

because of lack of ng eject in angular6 , i use this to create a custom webpack config file.

workerLoader.ts

import './polyfills.ts';
import '@angular/core';
import '@angular/common';

import { platformWorkerAppDynamic } from '../node_modules/@angular/platform-webworker-dynamic';
import { AppModule } from './app/app.module';

platformWorkerAppDynamic().bootstrapModule(AppModule);

main.ts

import { enableProdMode } from '@angular/core';
import { bootstrapWorkerUi,WORKER_UI_LOCATION_PROVIDERS } from '@angular/platform-webworker';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';



if (environment.production) { 
  enableProdMode();
}


bootstrapWorkerUi('webworker.chunk.js',WORKER_UI_LOCATION_PROVIDERS);

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';
import {
  WorkerAppModule,
  WORKER_APP_LOCATION_PROVIDERS,
  WORKER_UI_LOCATION_PROVIDERS
} from '@angular/platform-webworker';
import { APP_BASE_HREF } from '@angular/common'

@NgModule({
  declarations: [
    AppComponent,
   // some components
  ],
  imports: [
    BrowserModule,
    //some imports
    WorkerAppModule,

  ],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '/'
    },
    WORKER_APP_LOCATION_PROVIDERS
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const { AotPlugin } = require('@ngtools/webpack');


module.exports = {
    "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"
},

 optimization: {
     splitChunks: {
         cacheGroups: {
             commons: {
                 test: /[\\/]node_modules[\\/]/,
                 name: 'vendor',
                 chunks: 'all'
             }
         }
     }
 },

}

the problem is after going in browser , i get an error webworker.chunk.js:1 Uncaught ReferenceError: window is not defined and the line create this error is
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["webworker"],{

i find a same question , but not worked for me .

how to solve the problem?

update:
my question marked as a possible duplicate , but i referred to that question myself and emphasized that not worked for me.

update:
AFAIK a web worker doesn't access to global variables such as window and the error is somehow weird because want to access window in a web worker . i think a misconfiguration in webpack config file is the reason of the error . the error image

Answer 1

I had the same error, I solved it by adding the following option to customWebpackConfig in angular.json:

"mergeStrategies": {"optimization":"replace"}

I hope that helps

see related gitHub issue