在 Angular 9 CLI webworker 中导入 mathjs 时出错

Question

我目前正在尝试使用 Angular CLI 9.1.7 将网络工作者添加到我的 Angular 9 项目中。这个网络工作者应该运行使用 mathjs 7 进行一些计算。

但是在webworker中导入mathjs总是会导致浏览器控制台出现如下错误。如果我不导入 mathjs，工作人员运行没有问题。

index.js:7 Uncaught ReferenceError: window is not defined
    at Object../node_modules/seed-random/index.js (index.js:7)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/mathjs/es/function/probability/util/seededRNG.js (seededRNG.js:1)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/mathjs/es/function/probability/pickRandom.js (pickRandom.js:1)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/mathjs/es/factoriesAny.js (factoriesAny.js:1)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/mathjs/es/entry/pureFunctionsAny.generated.js (pureFunctionsAny.generated.js:1)
    at __webpack_require__ (bootstrap:19)

引用的行是

var GLOBAL = typeof global === 'undefined' ? window : global;

并且是 mathjs 中使用的 seed-random 库的一部分。我知道 window 在 webworker 中通常是未定义的，但是据我所知应该设置 global 。在 angular-devkit 内部使用的 webpack 配置中，我找到了 follwing section:

{
  plugins: [new WorkerPlugin({
    globalObject: false,
    plugins: [getTypescriptWorkerPlugin(wco, workerTsConfigPath)],
  })],
}

在那里，我已经尝试在本地 node_modules 文件夹中将 globalObject 设置为 self 或 this，但这并没有解决问题。我也没有在 angular.json 文件中看到一个选项来为 webworker 提供任何额外的配置来解决这个问题，所以我不确定该怎么做才能使它工作。在 mathjs documentation 中，我找到了一个在 webworker 中使用它的示例，因此我认为它也应该可以使用 Angular CLI。

我用一个最小的工作示例创建了一个 GitHub repo。如果你运行它与

npm install
npm start

您可以在浏览器控制台中看到所描述的错误。

所以我的问题是：如何在 Angular CLI webworker 中使用 mathjs？

Answer 1

我在 math.js GitHub 上打开了一个 issue，其中提出了另一种解决方法：似乎只需更改

的导入就足够了

import { sqrt } from 'mathjs';

至

import { sqrt } from 'mathjs/dist/math.js';

修复 webworker。

此解决方法相当简单并且似乎有效。但是，这个问题可能会在 math.js 的未来版本中得到解决。检查此问题的更新可能有意义。

在 Angular 9 CLI webworker 中导入 mathjs 时出错

Error when importing mathjs in Angular 9 CLI webworker

mathjs

angular-cli

angular

angular-devkit