升级到Angular 8后d3.js运行时错误 [英] d3.js runtime error after upgrade to Angular 8

问题描述

我正在尝试将Angular 6应用程序升级到Angular8.我的代码可以编译，但是我立即收到运行时错误" d3.js:8 Uncaught TypeError:无法读取未定义的属性'document'".

I am experimenting with upgrading my Angular 6 application to Angular 8. My code compiles, but I immediately receive a run-time error "d3.js:8 Uncaught TypeError: Cannot read property 'document' of undefined".

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

The line failing in d3.js is var d3_document = this.document;. This leads me to believe that Angular 8 is running d3.js in strict mode. I have the latest version of the d3 node module ("d3": "3.5.17"), and it apparently does not support strict mode; my understanding is "this" is supposed to reference the window object but that does not work in strict mode.

我知道Angular 8现在使用dart-sass而不是node-sass，这应该更严格.我确实尝试安装node-sass来代替dart-sass来使用它(按照升级文档的建议)，但是我很确定这与sass无关.

I know Angular 8 now uses dart-sass instead of node-sass, which is supposedly stricter. I did try installing node-sass to use it instead of dart-sass (as recommended by the upgrade documentation), but I am pretty sure this is not sass related.

我会注意到我的一些其他软件包需要更新，因为它们依赖于Angular 6的软件包，但是我看不到这将如何影响他的d3错误.

I will note that some of my other packages need to be updated because they are dependent on Angular 6's packages, but I don't see how this would effect his d3 error.

我也尝试在tsconfig.json文件中明确说出"noImplicitUseStrict": false,，但收到相同的错误.我也尝试过"noImplicitUseStrict": true,，但没有运气.

I have also tried explicitly saying "noImplicitUseStrict": false, in my tsconfig.json file, but received the same error. I have also tried "noImplicitUseStrict": true, with no luck.

我已经引用了此堆栈溢出帖子，该帖子解决了相同的错误: https://stackoverflow.com/questions/33821312/如何删除按边框添加的全球使用限制；但是我很难将这些应用于我的情况，因为我正在使用Angular项目，并且不确定babel是否适用或如何修改babel选项.

I have referenced this stack overflow post which addresses the same error: D3.js : Uncaught TypeError: Cannot read property 'document' of undefined, and the referenced solution: https://stackoverflow.com/questions/33821312/how-to-remove-global-use-strict-added-by-babel; but I am having a difficult time applying these to my situation because I am working with an Angular project and unsure if babel applies or how to modify the babel options.

完全错误:

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

预期没有错误.有没有一种方法可以指定我不希望该节点模块在严格模式下运行?

Expected no error. Is there a way to specify that I do not want this node module to run in strict mode?

推荐答案

自昨天早上以来，我刚刚遇到了同样的问题，但是现在我已经解决了该问题.

I have just experienced the same issue since yesterday morning, but I have now fixed it.

在package.json中，我使用以下软件包:

Within my package.json I use the following packages:

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

这里真正的问题是D3库尚未准备好用于ES2015/ES6.

The real problem here is that the D3 libraries are not ready for ES2015/ES6.

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

So to fix this, you need to change 2 items within your Angular solution's tsconfig.json file.

module = es2015 而不是esnext

module = es2015 and NOT esnext

target = es5 而非es2015

target = es5 and NOT es2015

因此完整的tsconfig.json应该如下所示:

So the full tsconfig.json should look like this:

{
  "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

To see charts in action, take a look at my tutorial here: http://www.exodus-cloud.co.uk/tutorials/angular-charting-nvd3

这篇关于升级到Angular 8后d3.js运行时错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！