Encountering issues in d3.js following the transition to Angular 8

Question

Encountering issues in d3.js following the transition to Angular 8

After upgrading my Angular 4 app to Angular 8, I encountered an issue where the application works fine in development build but breaks in production build. Upon loading the application, the following error is displayed.

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)

In addition, here is a snippet from my tsconfig.json file.

{
  "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 attempted to change the target from es2015 to es5 without success, as it resulted in an error in vendor.js. Any assistance on resolving this issue would be highly appreciated. Thank you

angular typescript d3.js angular8

Answer 1

Answer №1

To resolve the issue, I made a simple modification in the tsconfig.json file by changing the target from es2015 to es5. The d3 library currently does not support es2015.

This adjustment prevented an error in d3.js related to the usage of UTF-8 characters like π. To address this, you can set the charset to UTF-8 in the HTML host document.

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

Answer 2

To resolve the issue, I made a simple modification in the tsconfig.json file by changing the target from es2015 to es5. The d3 library currently does not support es2015.

This adjustment prevented an error in d3.js related to the usage of UTF-8 characters like π. To address this, you can set the charset to UTF-8 in the HTML host document.

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

Answer 3

Answer №2

Angular 8 made a change by including type="module" in the index.html when targeting es2015+. In my experience, I successfully used es2017 with Angular 7 while also incorporating d3 (via plotly.js). To address this change, I had to manually modify the dist/index.html file. This solution worked perfectly for me as it allowed the generated code to function without any issues.

To achieve the same result, start by installing https://www.npmjs.com/package/@angular-builders/custom-webpack and follow their configuration instructions. After creating the extra-webpack.config.js file, add the following code:

class FixIndex {
  constructor(path) {
    this.path = path;
  }

  done() {
    const path = __dirname + '/dist/' + this.path;
    if (!fs.existsSync(path)) {
        console.log('path not found', path);
        return;
    }
    let file = fs.readFileSync(path, 'utf8');
    file = file.replace(/type="module"/g, '');

    fs.writeFileSync(path, file);
  }

  apply(compiler) {
    compiler.hooks.done.tap(
        'FixIndex',
        () => {
            setTimeout(() => {
                this.done();
            }, 1);
        }
    );
  }
}

module.exports = {
  plugins: [
    new FixIndex('deepkit/index.html'),
  ],
}

Answer 4

Angular 8 made a change by including type="module" in the index.html when targeting es2015+. In my experience, I successfully used es2017 with Angular 7 while also incorporating d3 (via plotly.js). To address this change, I had to manually modify the dist/index.html file. This solution worked perfectly for me as it allowed the generated code to function without any issues.

To achieve the same result, start by installing https://www.npmjs.com/package/@angular-builders/custom-webpack and follow their configuration instructions. After creating the extra-webpack.config.js file, add the following code:

class FixIndex {
  constructor(path) {
    this.path = path;
  }

  done() {
    const path = __dirname + '/dist/' + this.path;
    if (!fs.existsSync(path)) {
        console.log('path not found', path);
        return;
    }
    let file = fs.readFileSync(path, 'utf8');
    file = file.replace(/type="module"/g, '');

    fs.writeFileSync(path, file);
  }

  apply(compiler) {
    compiler.hooks.done.tap(
        'FixIndex',
        () => {
            setTimeout(() => {
                this.done();
            }, 1);
        }
    );
  }
}

module.exports = {
  plugins: [
    new FixIndex('deepkit/index.html'),
  ],
}

Encountering issues in d3.js following the transition to Angular 8

Answer №1

Answer №2

Similar questions

Why is my Angular 2 app (TypeScript) not functioning properly?

Guide to assigning object values according to properties/keys

Utilize SCSS values within TypeScript by applying them on a class level

How to access the Parent ViewContainerRef within a projected child component in Angular 5

Updating Values in Nested Forms with Angular Reactive Form

The module 'DynamicTestModule' has imported an unexpected directive called 'InformationComponent'. To resolve this issue, please include a @NgModule annotation

Struggling to locate the module with the imports of { async, TestBed } from '@angular/core/testing' and { IonicModule } from 'ionic-angular'

Tips for populating array values in an Angular9 template using forms

Issues with loading Angular 4 Bootstrap JS post compiling

Is there a way to prevent the Drop event in Angular2?

React component's state is not being correctly refreshed on key events

I am facing difficulties in retrieving data from MongoDB using Angular 8

Mastering the TypeScript syntax for executing the MongoDB find method

The NestJS Backend is always being asked by Grafana to access the /api/live/ws endpoint

Angular UI validation malfunctioning upon loading of the page

I would like to customize the Primeng switch by changing the values from boolean to 'N' or 'Y'

Exploring the power of RxJs through chaining observers

The process of extracting a value from an array of objects encountered an error due to the undefined object

Guide to incorporating Jquery-Comment into Angular versions 2 and beyond

Update your AngularJS to the most recent version of Angular