Angular

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，但对我不起作用。

如何解决问题？

更新:
我的问题被标记为可能重复，但我自己提到了那个问题并强调这对我不起作用。

更新:
据我所知，网络工作者无法访问诸如 window 之类的全局变量，并且该错误在某种程度上很奇怪，因为想要在网络工作者中访问 window 。我认为 webpack 配置文件中的错误配置是错误的原因。 the error image

Answer 1

我有同样的错误，我通过在 angular.json 中的 customWebpackConfig 添加以下选项解决了这个问题：

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

希望对你有所帮助

见related gitHub issue

Angular - angular6 中 web worker 的 webpack 配置

Angular - webpack config for web worker in angular6

web-worker

webpack

angular-cli

angular6