我正在尝试将我的 Angular 6 应用程序升级到 Angular 8。我的代码可以编译,但我立即收到运行时错误“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”应该引用窗口对象,但这在严格模式下不起作用。
我知道 Angular 8 现在使用 dart-sass 而不是 node-sass,据说后者更严格。我确实尝试安装 node-sass 以使用它而不是 dart-sass(如升级文档所建议的那样),但我很确定这与 sass 无关。
我会注意到我的其他一些包需要更新,因为它们依赖于 Angular 6 的包,但我看不出这将如何影响他的 d3 错误。
我也曾尝试在我的 tsconfig.json 文件中明确说明 "noImplicitUseStrict": false,
,但收到了同样的错误。我也尝试过 "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 ;但是我很难将这些应用于我的情况,因为我正在处理 Angular 项目并且不确定 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
预计没有错误。有没有办法指定我不希望此节点模块以严格模式运行?
最佳答案
我从昨天早上开始就遇到了同样的问题,但我现在已经解决了。
在我的 package.json 中,我使用了以下包:
"d3": "^3.5.17",
"ng2-nvd3": "^2.0.0",
"nvd3": "^1.8.6"
这里真正的问题是 D3 库还没有为 ES2015/ES6 做好准备。
因此,要解决此问题,您需要更改 Angular 解决方案的 tsconfig.json 文件中的 2 项。
module = 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
关于javascript - 升级到 Angular 8 后 d3.js 运行时错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56400413/