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

问题描述

我正在尝试将我的 Angular 6 应用程序升级到 Angular 8.我的代码可以编译，但我立即收到一个运行时错误d3.js:8 Uncaught TypeError: Cannot read property 'document' of undefined".

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.

我参考了这个堆栈溢出帖子，它解决了同样的错误:D3.js : Uncaught TypeError: Cannot read property 'document' of undefined，以及引用的解决方案:https://stackoverflow.com/questions/33821312/How-to-remove-global-use-strict-adding-by-babel;但是我很难将这些应用于我的情况，因为我正在处理一个 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屋！