d3.js runtime error after upgrade to Angular 8

Question

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:

Answer 1

I have just experienced the same issue since yesterday morning, but I have now fixed it.

Within my package.json I use the following packages:

"d3": "^3.5.17",
"ng2-nvd3": "^2.0.0",
"nvd3": "^1.8.6"

The real problem here is that the D3 libraries are not ready for ES2015/ES6.

So to fix this, you need to change 2 items within your Angular solution's tsconfig.json file.

module = es2015 and NOT esnext

target = es5 and NOT es2015

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

To see charts in action, take a look at my tutorial here: http://www.exodus-cloud.co.uk/tutorials/angular-charting-nvd3