升级到角8后的d3.js运行时错误

Question

我正在尝试将我的角6应用程序升级到角8。我的代码编译，但我立即收到一个运行时错误"d3.js:8未定义的TypeError:无法读取未定义的的属性‘文档’“。

d3.js中失败的行是var d3_document = this.document;。这使我相信，角8是在严格模式下运行d3.js。我有最新版本的d3节点模块("d3"："3.5.17")，它显然不支持严格模式；我的理解是，"this“应该引用窗口对象，但在严格模式下不能工作。

我知道角8现在使用飞镖，而不是节点sass，这应该更严格。我确实尝试过安装not来代替dart-sass (正如升级文档所建议的那样)，但我很确定这与sass无关。

我将注意到，我的一些其他包需要更新，因为它们依赖于角6的包，但我看不出这将如何影响他的d3错误。

我还尝试在我的"noImplicitUseStrict": false,文件中显式地表示tsconfig.json，但也收到了同样的错误。我也尝试过没有运气的"noImplicitUseStrict": true,。

我引用了这个堆栈溢出帖子，它解决了相同的错误：D3.js : Uncaught TypeError: Cannot read property 'document' of undefined和引用的解决方案：https://stackoverflow.com/questions/33821312/how-to-remove-global-use-strict-added-by-babel；但是我很难将它们应用到我的情况中，因为我正在处理一个有角度的项目，并且不确定babel是否适用或如何修改babel选项。

完全错误：

d3.js:8 Uncaught TypeError: Cannot read property 'document' of undefined
    at d3.js:8
    at Object../node_modules/d3/d3.js (d3.js:9554)
    at __webpack_require__ (bootstrap:83)
    at Module../dist/core-services/fesm2015/core-services.js (core-services.js:1)
    at __webpack_require__ (bootstrap:83)
    at Module../src/app/app.component.ts (main-es2015.js:22262)
    at __webpack_require__ (bootstrap:83)
    at Module../src/app/app.module.ts (app.component.ts:21)
    at __webpack_require__ (bootstrap:83)
    at Module../src/main.ts (main.ts:1)
(anonymous) @   d3.js:8
./node_modules/d3/d3.js @   d3.js:9554
__webpack_require__ @   bootstrap:83
./dist/core-services/fesm2015/core-services.js  @   core-services.js:1
__webpack_require__ @   bootstrap:83
./src/app/app.component.ts  @   main-es2015.js:22262
__webpack_require__ @   bootstrap:83
./src/app/app.module.ts @   app.component.ts:21
__webpack_require__ @   bootstrap:83
./src/main.ts   @   main.ts:1
__webpack_require__ @   bootstrap:83
0   @   main.ts:17
__webpack_require__ @   bootstrap:83
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main-es2015.js:1

预期没有错误。是否有一种方法可以指定我不希望此节点模块在严格模式下运行？

Answer 1

从昨天早上开始，我刚刚经历过同样的问题，但现在我已经解决了。

在我的package.json中，我使用以下包：

"d3": "^3.5.17",
"ng2-nvd3": "^2.0.0",
"nvd3": "^1.8.6"

这里真正的问题是，D3库还没有为is 2015/ES6做好准备。

因此，要解决这个问题，您需要在您的角度解决方案的tsconfig.json文件中更改2项。

模块= es2015而不是esnext

target = es5而非es2015

所以完整的tsconfig.json应该如下所示：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

要查看实际操作中的图表，请看我的教程：http://www.exodus-cloud.co.uk/tutorials/angular-charting-nvd3

Answer 2

我能够通过将d3包含在angular.json的“脚本”字段中来工作。