Running Angular 5 App in WebWorker verursacht Fensterobjekt zu undefined

Question

Ich versuche, this (ngx-admin) kostenlos Angular Vorlage auf Angular 5 und dann versuchen, die gesamte App in WebWorker wie in diesem SO Post erwähnt.

ich die App Angular 5 erfolgreich aktualisiert und es funktioniert gut, aber wenn ich versuche, die App zu konfigurieren innerhalb Webworker es gibt mir folgende Fehler auszuführen:

Die Vollständiger Code (modifiziert nach Angular 5 und Webworker) kann gefunden werden here

Ich habe versucht, DefinePlugin in meiner Webpack-Konfiguration hinzuzufügen, aber kein Glück.

webpack.config.json:

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

konnte ich neue leere Winkel-cli Anwendung innerhalb Webworker laufen, aber ich bin nicht in der Lage diese Vorlage innerhalb Webworker auszuführen. Ich denke, es gibt ein Knotenpaket, das Probleme verursacht.

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

Web Arbeiter laufen nicht in einem Fenster und hat daher nicht das Fensterobjekt. Wenn Sie jedoch Bibliotheken verwenden, die das Fensterobjekt verwenden, können Sie es selbst zuweisen, indem Sie die Selbstvariable oben im Code verwenden.

const window = self; 

Von MDN:

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.