升级到 Angular 8 后 d3.js 中的错误 [英] Error in d3.js after upgrading to Angular 8

问题描述

我已将我的 Angular 4 应用更新为 Angular 8.应用程序在开发构建中运行良好，但在生产构建中中断.加载应用程序时出现以下错误.

I have updated my Angular 4 app to Angular 8. Application works fine in dev build but breaks in prod build. I get the following error when loading the application.

未捕获的类型错误:无法读取未定义的属性文档"在 d3.js:8在 Object../node_modules/d3/d3.js (d3.js:9554)webpack_require (bootstrap:78)在 Module../src/app/pages/home/dashboard/map/map.component.ts (main-es2015.js:9841)webpack_require (bootstrap:78)在模块../src/app/pages/home/home.routes.ts (home.routes.ts:2)webpack_require (bootstrap:78)在 Module../src/app/pages/home/home.module.ts (home.event.bus.ts:5)webpack_require (bootstrap:78)

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:78) at Module../src/app/pages/home/dashboard/map/map.component.ts (main-es2015.js:9841) at webpack_require (bootstrap:78) at Module../src/app/pages/home/home.routes.ts (home.routes.ts:2) at webpack_require (bootstrap:78) at Module../src/app/pages/home/home.module.ts (home.event.bus.ts:5) at webpack_require (bootstrap:78)

我的 tsconfig.json 文件看起来像这样.

And my tsconfig.json file looks like this.

{
  "compileOnSave": false,
  "compilerOptions": {
  "importHelpers": true,
  "outDir": "./dist/out-tsc",
  "baseUrl": "src",
  "sourceMap": true,
  "declaration": false,
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es2015",
  "typeRoots": [
    "node_modules/@types"
  ],
  "lib": [
    "es2016",
    "dom"
  ],
  "module": "esnext",
  "paths": {
    "core-js/es7/reflect": ["../node_modules/core-js/proposals/reflect- 
     metadata"],
    "core-js/es6/*": ["../node_modules/core-js/es/*"]
  }
 }
}

我尝试将目标从 es2015 更改为 es5，但没有成功，并且在 vendor.js 中出现错误任何帮助，将不胜感激.谢谢

I tried changing the target from es2015 to es5 with no success and gave me an error in vendor.js Any help would be appreciated. Thanks

推荐答案

我通过将 tsconfig.json 文件中的目标从 es2015 更改为 解决了该问题es5.d3 库目前与 es2015 不兼容.

I fixed the issue by changing the target in tsconfig.json file from es2015 to es5. d3 library is not compatible with es2015 as of yet.

由于使用了 UTF-8 符号(例如 π)，这反过来又会在 d3.js 中引发错误.要解决此问题，您可以在 HTML 主机文档上指定 UTF-8 字符集.

And that in return throws an error in d3.js because of the use of UTF-8 symbols such as π. To fix that you can specify the UTF-8 charset on the HTML host document.

<meta http-equiv="content-type" content="text/html; charset=UTF8">

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