new Worker() 只有在传递一个字符串时才会被捆绑
new Worker() will only be bundled if passed a String
我正在尝试网络工作者在我的 Angular 8 应用程序中 运行 一个耗时的数据分析脚本,但我在捆绑工作者时遇到了一些问题。我正在寻求帮助以找出我所缺少的东西。
我使用 Angular-CLI 8.0.2 中包含的原理图为我的项目生成了一个新工作程序:
ng g webWorker suggestions --project=my-project
这会生成新的 suggestions.worker.ts
和 tsconfig.worker.ts
,并更新我的 tsconfig.app.json
、angular.json
和 package.json
。这些看起来不错,但如果需要,我可以提供详细信息。
我已将 suggestions.worker.ts
移动到与将实例化 worker 的服务相同的文件夹中。实例化 worker 的函数如下所示:
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;
}
但是,当我构建我的项目时,出现以下警告和错误:
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
构造函数,但我已经这样做了。
此外,错误第3行感叹号后面的路径实际上是我存储服务和工作文件的两个文件夹。也许这是一个提示?
如有任何建议,我们将不胜感激!
我通过降级到 angular-cli@8.0.1 解决了这个问题。仍然不确定问题的根本原因。
解决方案在这里https://github.com/angular/angular-cli/issues/14776#issuecomment-516998921,所以只需添加第二个参数如下
new Worker("file path", { type: "module" });
避免
... 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
我正在尝试网络工作者在我的 Angular 8 应用程序中 运行 一个耗时的数据分析脚本,但我在捆绑工作者时遇到了一些问题。我正在寻求帮助以找出我所缺少的东西。
我使用 Angular-CLI 8.0.2 中包含的原理图为我的项目生成了一个新工作程序:
ng g webWorker suggestions --project=my-project
这会生成新的 suggestions.worker.ts
和 tsconfig.worker.ts
,并更新我的 tsconfig.app.json
、angular.json
和 package.json
。这些看起来不错,但如果需要,我可以提供详细信息。
我已将 suggestions.worker.ts
移动到与将实例化 worker 的服务相同的文件夹中。实例化 worker 的函数如下所示:
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;
}
但是,当我构建我的项目时,出现以下警告和错误:
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
构造函数,但我已经这样做了。
此外,错误第3行感叹号后面的路径实际上是我存储服务和工作文件的两个文件夹。也许这是一个提示?
如有任何建议,我们将不胜感激!
我通过降级到 angular-cli@8.0.1 解决了这个问题。仍然不确定问题的根本原因。
解决方案在这里https://github.com/angular/angular-cli/issues/14776#issuecomment-516998921,所以只需添加第二个参数如下
new Worker("file path", { type: "module" });
避免
... 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