Error in d3.js after upgrading to Angular 8

Question

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.

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)

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/*"]
  }
 }
}

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

Answer 1

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.

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