Chạy ứng dụng Angular 5 bên trong webworker khiến đối tượng cửa sổ không được xác định

Question

Tôi đang cố gắng nâng cấp this (ngx-admin) mẫu Angular miễn phí lên Angular 5 và sau đó cố chạy toàn bộ ứng dụng bên trong WebWorker như đã đề cập trong SO Post này.

tôi nâng cấp thành công ứng dụng kiễu góc 5 và nó đang làm việc tốt nhưng khi tôi cố gắng để cấu hình các ứng dụng chạy bên trong WebWorker nó mang lại cho tôi lỗi sau:

Các bạn có thể tìm thấy mã hoàn chỉnh (được sửa đổi thành Angular 5 và webworker) here

Tôi đã cố gắng thêm DefinePlugin vào cấu hình webpack của mình nhưng không may mắn.

webpack.config.json:

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

tôi đã có thể chạy ứng dụng rỗng góc-cli mới bên WebWorker nhưng tôi không thể chạy mẫu này bên WebWorker. Tôi đoán có một số gói nút đó là tạo ra vấn đề.

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 workers không chạy trong một cửa sổ và không do đó không có đối tượng cửa sổ. Tuy nhiên, nếu bạn đang sử dụng thư viện sử dụng đối tượng cửa sổ, bạn có thể tự gán nó bằng cách sử dụng biến tự ở đầu mã của bạn.

const window = self; 

Từ 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.