Angular - angular6中web worker的webpack配置

Question

我试图在网络工作者中运行我的angular6 web应用程序，如here所述

由于angular6中缺少ng eject，我使用this创建自定义webpack配置文件。

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'
             }
         }
     }
 },

}

问题是进入浏览器后，我得到一个错误webworker.chunk.js:1 Uncaught ReferenceError: window is not defined和行创建此错误是 (window["webpackJsonp"] = window["webpackJsonp"] || []).push([["webworker"],{

我找到了同样的question，但不适合我。

怎么解决这个问题？

更新： 我的问题被标记为可能重复，但我自己提到了这个问题，并强调不适合我。

更新： AFAIK网络工作者不能访问全局变量，如window，错误有点奇怪，因为想要访问网络工作者中的window。我认为webpack配置文件中的错误配置是错误的原因。 the error image

Answer 1

我有同样的错误，我通过将以下选项添加到angular.json中的customWebpackConfig来解决它：

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

我希望有所帮助

见related gitHub issue