Question

我正在尝试将this (ngx-admin)免费的Angular模板升级到Angular 5，然后尝试在此SO Post中提到的WebWorker中运行整个应用。

我成功将应用程序升级到Angular 5并且工作正常但是当我尝试将应用程序配置为在Webworker中运行时它会出现以下错误：

可以找到完整的代码（修改为Angular 5和webworker）here

我尝试在我的webpack配置中添加DefinePlugin，但没有运气。

webpack.config.json：

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

我能够在webworker中运行新的空angular-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

Web worker不在窗口中运行，因此没有窗口对象。但是，如果您使用的是使用窗口对象的库，则可以使用代码顶部的自变量自行分配。

const window = self;

来自MDN：

worker是使用构造函数（例如Worker（））创建的对象   运行一个命名的JavaScript文件 - 该文件包含将要执行的代码   在工作线程中运行;工人在另一个全球范围内运行   与当前窗口不同。因此，使用窗口快捷方式   在工作者中获取当前的全局范围（而不是self）   返回错误。

工作人员上下文由 DedicatedWorkerGlobalScope 表示   在专职工人的情况下的对象（标准工人是   单个脚本使用;共享工人使用   SharedWorkerGlobalScope）。只有专职工作人员才能访问   首先产生它的脚本，而共享工作者可以   从多个脚本访问。

Answer 2

您必须将此添加到webpack配置文件中：

output: {
...
globalObject: "this"
}

编辑： 先前的解决方案有些棘手。如果您确实制作了Webworker捆绑包，则必须使用Webpack多个目标。（Webpack版本> = 4.12.0）

export.module= [
         {
           target: 'web',
           // Webpack config here for bundle that will work in UI thread.
         },
         {
           target: 'webworker',
           // Webpack config here for bundle that will work in the worker.
         }
]

在webworker中运行Angular 5 app会导致窗口对象未定义

2 个答案: