Question

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

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

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

Answer 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

Answer 2

这是我能够解决这些问题并能够将Angular 5/6应用程序转换/迁移到Angular 8的方式

手动删除node_module文件夹或在命令提示符下使用以下命令（有时可能需要命令提示符的管理模式）

删除package-lock.json文件。不用担心，下次安装npm会创建一个新的package-lock.json文件。请注意，由于这是框架升级，我们可以使用Delete file选项，否则不建议删除此文件。

package-lock.json

手动删除node_module文件夹或在命令提示符下使用以下命令（有时可能需要命令提示符的管理模式）

npm rm -rf node_modules

安装最新的CLI

npm install --save-dev @angular/cli@latest


npm uninstall @angular-devkit/build-angular

npm i --save-dev @angular-devkit/build-angular@latest

Answer 3

通过在angular.json的“脚本”字段中包含d3，我可以使其工作。

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

3 个答案: