Angular 10 webworker 找不到名称“Element”。- 如何解决？

Question

所以我们已经有了一些网络工作者。但为了测试这些，我将它们全部删除，只留了一个，并清空了那个。

\n

我们目前正在从 webpack（使用worker-loader）迁移到 ngserve，我使用 nggenereteweb-worker 创建一个初始的 webworker，调整我们的 tsconfig 并创建一个 tsconfig.worker.json

\n

空的 webworker 中有一个 console.log，并且是根据他们生成的 Angular 演示 webworker 进行设置的。看起来像这样

\n

/// <reference lib="webworker" />\n\naddEventListener('message', (message: any) => console.log(message));\n

\n

工人的进口只是：

\n

let worker = new Worker('./worker/converter.worker', {type: 'module'});\nworker.addEventListener('message', (event: MessageEvent) => this.receiveWorkerMessage(event), false);\n

\n

现在 Angular 和 AngularJs 编译得很好。

\n

在编译过程中，网络工作者如何给出这些错误

\n

ERROR in ./src/app/admin/pages/finance/sovendus-export-converter/worker/converter.worker.ts (./node_modules/worker-plugin/dist/loader.js?name=0!./src/app/admin/pages/finance/sovendus-export-converter/worker/converter.worker.ts)\nModule build failed (from ./node_modules/worker-plugin/dist/loader.js):\n\nError: node_modules/@angular/core/core.d.ts:1540:29 - error TS2304: Cannot find name 'Element'.\n\n1540     constructor(nativeNode: Element);\n                                 ~~~~~~~\nnode_modules/@angular/core/core.d.ts:1541:26 - error TS2304: Cannot find name 'Element'.\n\n1541     get nativeElement(): Element | null;\n                              ~~~~~~~\nnode_modules/@angular/core/core.d.ts:1623:13 - error TS2304: Cannot find name 'Node'.\n\n1623     native: Node;\n                 ~~~~\nnode_modules/@angular/core/core.d.ts:1643:26 - error TS2304: Cannot find name 'Node'.\n\n1643     readonly nativeNode: Node;\n                              ~~~~\nnode_modules/@angular/core/core.d.ts:1644:29 - error TS2304: Cannot find name 'Node'.\n\n1644     constructor(nativeNode: Node);\n                                 ~~~~\nnode_modules/@angular/core/core.d.ts:6898:33 - error TS2304: Cannot find name 'Node'.\n\n6898     findTestabilityInTree(elem: Node, findInAncestors?: boolean): Testability | null;\n                                     ~~~~\nnode_modules/@angular/core/core.d.ts:10086:62 - error TS2304: Cannot find name 'Element'.\n\n10086 export declare function \xc9\xb5getDebugNode__POST_R3__(nativeNode: Element): DebugElement__POST_R3__;\n                                                                   ~~~~~~~\nnode_modules/@angular/core/core.d.ts:10088:62 - error TS2304: Cannot find name 'Node'.\n\n10088 export declare function \xc9\xb5getDebugNode__POST_R3__(nativeNode: Node): DebugNode__POST_R3__;\n                                                                   ~~~~\nnode_modules/@angular/core/core.d.ts:10117:49 - error TS2304: Cannot find name 'Element'.\n\n10117 export declare function \xc9\xb5getDirectives(element: Element): {}[];\n                                                      ~~~~~~~\nnode_modules/@angular/core/core.d.ts:10130:68 - error TS2304: Cannot find name 'Element'.\n\n10130 export declare function \xc9\xb5getHostElement(componentOrDirective: {}): Element;\n                                                                         ~~~~~~~\nnode_modules/@angular/core/core.d.ts:10614:83 - error TS2304: Cannot find name 'HTMLElement'.\n\n10614     queuePlayer(player: \xc9\xb5Player, context: ComponentInstance | DirectiveInstance | HTMLElement): void;\n                                                                                        ~~~~~~~~~~~\nnode_modules/@angular/core/core.d.ts:10918:48 - error TS2304: Cannot find name 'Document'.\n\n10918 export declare function \xc9\xb5setDocument(document: Document | undefined): void;\n                                                     ~~~~~~~~\nnode_modules/@angular/core/core.d.ts:13508:20 - error TS2304: Cannot find name 'Document'.\n\n13508     ownerDocument: Document;\n                         ~~~~~~~~\nnode_modules/@angular/core/core.d.ts:13511:13 - error TS2304: Cannot find name 'HTMLElement'.\n\n13511     target: HTMLElement;\n                  ~~~~~~~~~~~\nnode_modules/@angular/core/core.d.ts:13519:20 - error TS2304: Cannot find name 'Document'.\n\n13519     ownerDocument: Document;\n                         ~~~~~~~~\nnode_modules/@angular/core/core.d.ts:13522:13 - error TS2304: Cannot find name 'Document'.\n\n13522     target: Document;\n                  ~~~~~~~~\nnode_modules/@angular/core/core.d.ts:13530:20 - error TS2304: Cannot find name 'Document'.\n\n13530     ownerDocument: Document;\n                         ~~~~~~~~\nnode_modules/@angular/core/core.d.ts:13533:14 - error TS2304: Cannot find name 'Window'.\n\n13533     target: (Window & typeof globalThis) | null;\n

\n

现在我知道你无法访问 Web Worker 中的 DOM。但问题是我们没有这样做。网络工作者是空的。如果我删除对工作人员的导入，错误当然就会消失。

\n

更多数据：“\n我们的 tsconfig 看起来像这样

\n

{\n    "compileOnSave": false,\n    "compilerOptions": {\n        "allowSyntheticDefaultImports": true,\n        "baseUrl": "./",\n        "declaration": false,\n        "downlevelIteration": true,\n        "emitDecoratorMetadata": true,\n        "experimentalDecorators": true,\n        "importHelpers": true,\n        "module": "es2020",\n        "moduleResolution": "node",\n        "outDir": "./dist/out-tsc",\n        "sourceMap": true,\n        "target": "es5",\n        "paths": {\n            "hybrid/*": ["./hybrid/*"],\n            "images/*": ["./app/images/*"],\n            "layout/*": ["./app/layout/*"],\n            "pages/*": ["./app/pages/*"],\n            "scripts/*": ["./app/scripts/*"],\n            "styles/*": ["./app/styles/*"],\n            "translations/*": ["./app/translations/*"],\n            "vendor/*": ["./app/vendor/*"]\n        },\n        "typeRoots": [\n            "node_modules/@types"\n        ],\n        "lib": [\n            "es2018",\n            "dom"\n        ]\n    },\n    "angularCompilerOptions": {\n        "fullTemplateTypeCheck": true,\n        "strictInjectionParameters": true\n    }\n}\n

\n

我们的 angular.json 像这样

\n

{\n    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",\n    "version": 1,\n    "newProjectRoot": "projects",\n    "cli": {\n        "defaultCollection": "@daisycon/angular-schematics"\n    },\n    "projects": {\n        "my-daisycon": {\n            "root": "",\n            "sourceRoot": "src",\n            "projectType": "application",\n            "prefix": "app",\n            "schematics": {\n                "@schematics/angular:component": {\n                    "style": "scss",\n                    "lintFix": true,\n                    "skipTests": true\n                },\n                "@daisycon/angular-schematics:page": {\n                    "styleext": "scss",\n                    "lintFix": true,\n                    "skipTests": true\n                },\n                "@daisycon/angular-schematics:element": {\n                    "styleext": "scss",\n                    "lintFix": true,\n                    "skipTests": true\n                }\n            },\n            "architect": {\n                "build": {\n                    "builder": "@angular-builders/custom-webpack:browser",\n                    "options": {\n                        "styles": ["src/main.scss"],\n                        "extractCss": true,\n                        "customWebpackConfig": {\n                            "path": "./ng2-config/webpack.config.js"\n                        },\n                        "outputPath": "dist/",\n                        "index": "src/layout/daisycon/index.html",\n                        "main": "src/main.ts",\n                        "polyfills": "src/polyfills.ts",\n                        "tsConfig": "tsconfig.app.json",\n                        "assets": [\n                            {"glob": ".htaccess", "input": "src/", "output": "/"},\n                            {"glob": "favicon.ico", "input": "src/layout/daisycon/", "output": "/"},\n                            {"glob": "angular-locale_de-de.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},\n                            {"glob": "angular-locale_de.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},\n                            {"glob": "angular-locale_en-gb.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},\n                            {"glob": "angular-locale_en-us.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},\n                            {"glob": "angular-locale_en.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},\n                            {"glob": "angular-locale_fr-be.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},\n                            {"glob": "angular-locale_fr-fr.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},\n                            {"glob": "angular-locale_fr.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},\n                            {"glob": "angular-locale_nl-be.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},\n                            {"glob": "angular-locale_nl-nl.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},\n                            {"glob": "angular-locale_nl.js", "input": "./node_modules/angular-i18n/", "output": "/locales/"},\n                            {"glob": "version.js", "input": "src/", "output": "/"},\n                            {"glob": "**/*", "input": "src/app/core/assets/", "output": "/"},\n                            {"glob": "**/*", "input": "src/api/", "output": "/api"},\n                            {"glob": "**/*", "input": "app/vendor/", "output": "/vendor"},\n                            {"glob": "**/*", "input": "./node_modules/codemirror/", "output": "vendor/codemirror/"},\n                            {"glob": "**/*", "input": "app/translations/", "output": "translations/"}\n                        ],\n                        "scripts": [],\n                        "stylePreprocessorOptions": {\n                            "includePaths": [\n                                "./app/styles/_base/_daisycon",\n                                "./app/styles/_base",\n                                "./node_modules/",\n                                "./"\n                            ]\n                        },\n                        "webWorkerTsConfig": "tsconfig.worker.json"\n                    },\n                    "configurations": {\n                        "development": {\n                            "fileReplacements": [\n                                {\n                                    "replace": "src/config/xpartners.config.ts",\n                                    "with": "src/config/daisycon.config.ts"\n                                },\n                                {\n                                    "replace": "app/layout/xpartners/logo/logo-sprite.scss",\n                                    "with": "app/layout/daisycon/logo/logo-sprite.scss"\n                                }\n                            ]\n                        },\n                        "production": {\n                            "fileReplacements": [\n                                {\n                                    "replace": "src/config/xpartners.config.ts",\n                                    "with": "src/config/daisycon.config.ts"\n                                },\n                                {\n                                    "replace": "src/environments/environment.ts",\n                                    "with": "src/environments/environment.prod.ts"\n                                },\n                                {\n                                    "replace": "app/layout/xpartners/logo/logo-sprite.scss",\n                                    "with": "app/layout/daisycon/logo/logo-sprite.scss"\n                                }\n                            ],\n                            "optimization": true,\n                            "outputHashing": "all",\n                            "sourceMap": {"scripts": true, "styles": false, "hidden": true, "vendor": false},\n                            "aot": true,\n                            "extractCss": true,\n                            "namedChunks": false,\n                            "extractLicenses": true,\n                            "vendorChunk": false,\n                            "buildOptimizer": true,\n                            "budgets": [\n                                {\n                                    "type": "initial",\n                                    "maximumWarning": "2mb",\n                                    "maximumError": "5mb"\n                                }\n                            ]\n                        }\n                    }\n                },\n                "serve": {\n                    "builder": "@angular-builders/custom-webpack:dev-server",\n                    "options": {\n                        "browserTarget": "my-daisycon:build",\n                        "host": "my.daisycon.com.dev1",\n                        "port": 8080,\n                        "ssl": true,\n                        "sslCert": "./config/resources/ssl/san_domain_com.crt-extensions",\n                        "sslKey": "./config/resources/ssl/san_domain_com.key",\n                        "proxyConfig": "./config/proxy.conf.js",\n                        "disableHostCheck": true\n                    },\n                    "configurations": {\n                        "production": {\n                            "browserTarget": "my-daisycon:build:production"\n                        }\n                    }\n                },\n                "extract-i18n": {\n                    "builder": "@angular-devkit/build-angular:extract-i18n",\n                    "options": {\n                        "browserTarget": "my-daisycon:build"\n                    }\n                },\n                "test": {\n                    "builder": "@angular-devkit/build-angular:karma",\n                    "options": {\n                        "main": "src/test.ts",\n                        "polyfills": "src/polyfills.ts",\n                        "tsConfig": "tsconfig.spec.json",\n                        "karmaConfig": "karma.conf.js",\n                        "scripts": [],\n                        "assets": [\n                            "src/favicon.ico",\n                            "src/assets"\n                        ]\n                    }\n                },\n                "lint": {\n                    "builder": "@angular-devkit/build-angular:tslint",\n                    "options": {\n                        "tsConfig": [\n                            "tsconfig.app.json",\n                            "tsconfig.spec.json",\n                            "e2e/tsconfig.json",\n                            "tsconfig.worker.json"\n                        ],\n                        "exclude": [\n                            "**/node_modules/**"\n                        ]\n                    }\n                },\n                "e2e": {\n                    "builder": "@angular-devkit/build-angular:protractor",\n                    "options": {\n                        "protractorConfig": "e2e/protractor.conf.js",\n                        "devServerTarget": "my-daisycon:serve"\n                    },\n                    "configurations": {\n                        "production": {\n                            "devServerTarget": "my-daisycon:serve:production"\n                        }\n                    }\n                }\n            }\n        }\n    },\n    "defaultProject": "my-daisycon"\n}\n

\n

我们的 webworker ts-config 像这样

\n

{\n  "extends": "./tsconfig.json",\n  "compilerOptions": {\n    "outDir": "./out-tsc/worker",\n    "lib": [\n      "es2018",\n      "webworker"\n    ],\n    "types": []\n  },\n  "include": [\n    "src/**/*.worker.ts"\n  ]\n}\n\n

\n

我们的package.json

\n

{\n    "name": "@daisycon/mydaisycon",\n    "version": "1.0.0",\n    "description": "MyDaisycon App",\n    "scripts": {\n        "analyze:build": "cross-env NODE_ENV=production ANALYZE=true node --max-old-space-size=4096 ./node_modules/webpack/bin/webpack.js -p --progress --color --config ./config/webpack.config.babel.js",\n        "dev:purify": "cross-env PURIFY=true NODE_ENV=development webpack-dev-server --config ./config/webpack.config.babel.js",\n        "dev:server": "ng serve my-daisycon",\n        "dev:server-xp": "ng serve my-xpartners",\n        "dev:watch": "ng build --watch my-daisycon",\n        "dev:watch-xp": "ng build --watch my-xpartners",\n        "production:build": "ng build my-daisycon",\n        "production:build-xp": "ng build my-xpartners",\n        "compodocs:json": "compodoc -p ./.storybook/tsconfig.json -e json -d .",\n        "storybook": "npm run compodocs:json && start-storybook -p 9008 -s src/assets",\n        "storybook-build": "npm run compodocs:json && build-storybook -s src/assets",\n        "lint": "bash ./tooling/lint.sh",\n        "e2e": "ng e2e",\n        "kill": "taskkill /F /IM node.exe",\n        "tooling:update-backend": "start cmd.exe /k %DEV_WORK_DIR%/my.daisycon.com/tooling/update-backend.bat",\n        "tooling:generate-models": "node ./tooling/generate-models.js"\n    },\n    "devDependencies": {\n        "@angular-builders/custom-webpack": "10.0.1",\n        "@angular-devkit/build-angular": "0.1002.0",\n        "@angular/cli": "10.2.0",\n        "@angular/compiler-cli": "10.2.3",\n        "@angular/language-service": "10.2.3",\n        "@compodoc/compodoc": "1.1.11",\n        "@daisycon/angular-schematics": "0.0.7",\n        "@storybook/addon-actions": "5.3.18",\n        "@storybook/addon-backgrounds": "5.3.18",\n        "@storybook/addon-docs": "5.3.18",\n        "@storybook/addon-knobs": "5.3.18",\n        "@storybook/addon-links": "5.3.18",\n        "@storybook/addon-viewport": "5.3.18",\n        "@storybook/angular": "5.3.18",\n        "@types/jasmine": "3.5.0",\n        "@types/jasminewd2": "2.0.8",\n        "@types/jquery": "3.3.31",\n        "@types/node": "12.12.44",\n        "angular-gettext-loader": "1.0.1",\n        "codelyzer": "6.0.1",\n        "countries-enum": "git+https://gist.github.com/646386d5edc174e8b549111572897f81.git",\n        "expose-loader": "1.0.1",\n        "file-loader": "6.2.0",\n        "html-loader": "0.5.5",\n        "jasmine-core": "~3.5.0",\n        "jasmine-spec-reporter": "~5.0.0",\n        "json-loader": "0.5.7",\n        "karma": "~5.0.0",\n        "karma-chrome-launcher": "~3.1.0",\n        "karma-coverage-istanbul-reporter": "~3.0.2",\n        "karma-jasmine": "~4.0.0",\n        "karma-jasmine-html-reporter": "^1.5.0",\n        "ngtemplate-loader": "git+https://github.com/DaisyconBV/ngtemplate-loader.git",\n        "po2json": "1.0.0-alpha",\n        "protractor": "~7.0.0",\n        "storybook-addon-paddings": "2.0.2",\n        "taskkill": "3.1.0",\n        "ts-node": "9.0.0",\n        "tslint": "~6.1.0",\n        "typescript": "4.0.5"\n    },\n    "dependencies": {\n        "@amcharts/amcharts4": "4.7.19",\n        "@angular/animations": "10.2.3",\n        "@angular/common": "10.2.3",\n        "@angular/compiler": "10.2.3",\n        "@angular/core": "10.2.3",\n        "@angular/forms": "10.2.3",\n        "@angular/localize": "10.2.3",\n        "@angular/platform-browser": "10.2.3",\n        "@angular/platform-browser-dynamic": "10.2.3",\n        "@angular/router": "10.2.3",\n        "@angular/upgrade": "10.2.3",\n        "@ctrl/ngx-codemirror": "2.1.1",\n        "@fortawesome/fontawesome-pro": "5.12.0",\n        "@fortawesome/fontawesome-svg-core": "1.2.26",\n        "@fortawesome/free-brands-svg-icons": "5.12.0",\n        "@fortawesome/pro-duotone-svg-icons": "5.12.0",\n        "@fortawesome/pro-light-svg-icons": "5.12.0",\n        "@forta

    

Answer 1

审核 Web Worker 对其他代码的每个引用。包括未使用的参考文献。如果您的工作程序中的任何代码引用了不在webworker您的配置中的库中的代码.tsconfig，那么您的代码将无法编译。

从您的编译消息来看，似乎converter.worker.ts引用了一些执行import {...} from '@angular/core'.

当整个过程由 处理时webpack，该语句new Worker('./worker/converter.worker', {type: 'module'});由 检测worker-plugin（由角度构建器添加）。然后，WorkerPlugin 指示为该入口点引用的所有代码webpack创建一个单独的包。./worker/converter.worker当该包到达 TypeScript 编译器时，TypeScript 编译器将使用.tsconfig入口点指定的值来编译整个包，即converter.worker.ts.

如果任何代码有import语句，则该代码将包含在捆绑包中进行编译，无论该代码是否实际使用 import 语句。就我而言，我曾经ng generate service创建过我的工作人员的依赖项，生成器会自动放入@angular/core导入。我删除了@Inject注释，但保留在导入语句中。编译失败，直到我删除未使用的导入。