Webworker内のAngular 5 appを実行すると、ウィンドウオブジェクトが定義されません。

Question

this (ngx-admin) AngularテンプレートをAngular 5にアップグレードしてから、このSO PostのようにWebWorker内のアプリケーション全体を実行しようとしています。

私は成功した角度5にアプリをアップグレードし、それが正常に動作しているが、私はWebworker内で実行するアプリケーションを設定しようとすると、エラー、次の私を与える：

here

DefinePluginを私のwebpack設定に追加しようとしましたが、運がありませんでした。

webpack.config.json：

new DefinePlugin({ 
    window: undefined, 
    document: undefined 
}), 

私はwebworkerの内側に新しい空の角度-CLIアプリケーションを実行することができましたが、私はwebworkerの内側に、このテンプレートを実行することができません。私は問題を作成しているいくつかのノードパッケージがあると思います。

Package.json：

{ 
    "scripts": { 
    "ng": "ng", 
    "conventional-changelog": "conventional-changelog", 
    "e2e": "protractor ./protractor.conf.js", 
    "docs": "compodoc -p src/tsconfig.app.json -d docs", 
    "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s", 
    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s", 
    "build": "webpack", 
    "start": "webpack-dev-server --port=4200", 
    "test": "karma start ./karma.conf.js", 
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet" 
    }, 
    "dependencies": { 
    "@agm/core": "1.0.0-beta.2", 
    "@angular/animations": "5.1.2", 
    "@angular/common": "5.1.2", 
    "@angular/compiler": "5.1.2", 
    "@angular/core": "5.1.2", 
    "@angular/forms": "5.1.2", 
    "@angular/http": "5.1.2", 
    "@angular/platform-browser": "5.1.2", 
    "@angular/platform-browser-dynamic": "5.1.2", 
    "@angular/platform-server": "5.1.2", 
    "@angular/platform-webworker": "^5.1.2", 
    "@angular/platform-webworker-dynamic": "^5.1.2", 
    "@angular/router": "5.1.2", 
    "@asymmetrik/angular2-leaflet": "^2.2.1", 
    "@nebular/auth": "2.0.0-rc.3", 
    "@nebular/theme": "2.0.0-rc.3", 
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5", 
    "@swimlane/ngx-charts": "^7.0.1", 
    "angular2-chartjs": "0.3.0", 
    "angular2-leaflet": "^0.1.0", 
    "angular2-toaster": "4.0.0", 
    "bootstrap": "4.0.0-beta.2", 
    "chart.js": "2.5.0", 
    "ckeditor": "4.6.2", 
    "classlist.js": "1.1.20150312", 
    "core-js": "2.5.1", 
    "d3": "4.8.0", 
    "font-awesome": "4.7.0", 
    "intl": "1.2.5", 
    "ionicons": "2.0.1", 
    "leaflet": "^1.2.0", 
    "nebular-icons": "1.0.6", 
    "ng2-ckeditor": "1.1.9", 
    "ng2-smart-table": "1.1.0", 
    "ng2-tree": "2.0.0-alpha.10", 
    "ngx-charts": "^3.0.2", 
    "ngx-echarts": "1.2.2", 
    "normalize.css": "6.0.0", 
    "pace-js": "1.0.2", 
    "roboto-fontface": "0.8.0", 
    "rxjs": "5.5.6", 
    "socicon": "3.0.5", 
    "tether": "1.4.0", 
    "tinymce": "4.5.7", 
    "typeface-exo": "0.0.22", 
    "web-animations-js": "2.2.5", 
    "zone.js": "0.8.19" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.5.0", 
    "@angular/compiler-cli": "5.1.2", 
    "@angular/language-service": "5.1.2", 
    "@compodoc/compodoc": "1.0.5", 
    "@types/d3-color": "1.0.4", 
    "@types/jasmine": "2.5.54", 
    "@types/jasminewd2": "2.0.3", 
    "@types/leaflet": "^1.2.4", 
    "@types/node": "8.5.2", 
    "codelyzer": "3.2.1", 
    "conventional-changelog-cli": "1.3.4", 
    "husky": "0.13.3", 
    "jasmine-core": "2.6.4", 
    "jasmine-spec-reporter": "4.1.1", 
    "karma": "1.7.1", 
    "karma-chrome-launcher": "2.1.1", 
    "karma-cli": "1.0.1", 
    "karma-coverage-istanbul-reporter": "1.3.0", 
    "karma-jasmine": "1.1.0", 
    "karma-jasmine-html-reporter": "0.2.2", 
    "npm-run-all": "4.1.2", 
    "protractor": "5.1.2", 
    "rimraf": "2.6.1", 
    "stylelint": "7.13.0", 
    "ts-node": "3.2.2", 
    "tslint": "5.7.0", 
    "tslint-language-service": "0.9.6", 
    "typescript": "2.6.2", 
    "webpack-dev-server": "~2.9.3", 
    "webpack": "~3.8.1", 
    "autoprefixer": "^6.5.3", 
    "css-loader": "^0.28.1", 
    "cssnano": "^3.10.0", 
    "exports-loader": "^0.6.3", 
    "file-loader": "^1.1.5", 
    "html-webpack-plugin": "^2.29.0", 
    "less-loader": "^4.0.5", 
    "postcss-loader": "^1.3.3", 
    "postcss-url": "^5.1.2", 
    "raw-loader": "^0.5.1", 
    "sass-loader": "^6.0.3", 
    "source-map-loader": "^0.2.0", 
    "istanbul-instrumenter-loader": "^2.0.0", 
    "style-loader": "^0.13.1", 
    "stylus-loader": "^3.0.1", 
    "url-loader": "^0.6.2", 
    "circular-dependency-plugin": "^3.0.0", 
    "webpack-concat-plugin": "1.4.0", 
    "copy-webpack-plugin": "^4.1.1", 
    "uglifyjs-webpack-plugin": "1.0.0" 
    } 
} 

Answer 1

ウェブ労働者がウィンドウで実行されませんので、ウィンドウオブジェクトを持っていません。 ただし、ウィンドウオブジェクトを使用するライブラリを使用している場合は、コードの先頭にあるself変数を使用して自分自身を割り当てることができます。 MDNから

const window = self; 

：

A worker is an object created using a constructor (e.g. Worker()) that runs a named JavaScript file — this file contains the code that will run in the worker thread; workers run in another global context that is different from the current window. Thus, using the window shortcut to get the current global scope (instead of self) within a Worker will return an error.

The worker context is represented by a DedicatedWorkerGlobalScope object in the case of dedicated workers (standard workers that are utilized by a single script; shared workers use SharedWorkerGlobalScope). A dedicated worker is only accessible from the script that first spawned it, whereas shared workers can be accessed from multiple scripts.