Question

我正在尝试使用Web Worker在Angular 8应用程序中运行耗时的数据分析脚本，但是在捆绑该Worker时遇到了一些麻烦。我正在寻找帮助以找出我所缺少的东西。

我已使用Angular-CLI 8.0.2随附的示意图为我的项目生成了一个新工作人员：

suggestions.worker.ts

这将生成一个新的tsconfig.worker.ts和tsconfig.app.json，并更新我的angular.json，package.json和suggestions.worker.ts。对我来说，这些看起来不错，但是如果需要，我可以提供详细信息。

我已将async calculateSuggestions<T>( data: T[] ): Promise<Suggestions<T>> { const worker = new Worker('./suggestions.worker', { type: 'module', }); const result = new Promise((resolve, reject) => { worker.onmessage = ({ data }) => { resolve(data); }; worker.onerror = ({ error }) => { reject(error); }; }) as Promise<Suggestions<T>>; worker.postMessage({ data: data }); return result; }移到与将实例化工作程序的服务相同的文件夹中。实例化worker的函数如下：

WARNING in new Worker() will only be bundled if passed a String.

ERROR in chunk suggestions-suggestions-module
suggestions-suggestions-module.js
{..} \node_modules\@ngtools\webpack\src\index.js! {..} \src\app\extractor\
No template for dependency: ConstDependency

但是，当我构建项目时，会出现以下警告和错误：

Worker

我的猜测是我没有正确实例化String，从而导致捆绑过程失败。

警告似乎表明我应该将Worker传递给Unable to perform a request to: http://<strange host here>:8080/rest/gadgets/1.0/g/messagebundle/en_US/gadget.commo构造函数，但是我已经这样做了。

此外，错误第3行上的感叹号后面的路径实际上是我在其中存储服务和工作程序文件的两个文件夹。也许这是一个提示？

任何建议将不胜感激！

Answer 1

我通过降级到angular-cli@8.0.1解决了这个问题。仍然不确定问题的根本原因。

Answer 2

解决方案在https://github.com/angular/angular-cli/issues/14776#issuecomment-516998921，所以只需添加如下第二个参数

new Worker("file path", { type: "module" });

Answer 3

避免

... will only be bundled if passed options that include { type: 'module' }.. "

添加

new Worker('./testworker.worker', { type: "module" });

避免

No template for dependency: ConstDependency

检查是否有webpack版本不匹配
请参阅node ls的输出。 webpack@4.x.x
要解决此问题，请从package.json中删除您的webpack依赖项，或尝试npm prune
删除“ node_modules”文件夹和“ package-lock.json”
运行npm i
运行ng serve或ng build

如果传递了字符串，则新的Worker（）将仅捆绑在一起

3 个答案: