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

Sizing the Angular CDK overlay backdrop appropriately when connecting it to a component

Troubleshooting problem with ion-input in Ionic 3 regarding the keyboard issue

Initial values of dual knob settings on Ionic Range and their ability to update dynamically

Event when a panel menu in PrimeNG is clicked

Using type values in TypeScript

Execute the 'loadURL' function in the electron-Angular project when the Angular Compiler has finished preparing

Tips for distributing services in Angular

Before running any unit tests, I have to address all linting issues as required by ng test

Issue with directive implementation of regex test as attribute - validations in typescript and angular

Angular 14 is experiencing issues with NgRx Store failing to properly recognize the payload

Expanding the capabilities of generic functions in TypeScript using type variables

Aligning Description Item components horizontally in antdLearn how to easily horizontally align Description

Error in Typescript: The type 'Element' does not have a property named 'contains'

Retrieve error information from ResponseContentType.Blob request type

synchronize the exchange of information and events between two components

What is the reason for encountering a TypeScript error when using a union type?

Utilizing arrayUnion function in Firestore with Angular

Instructions for transferring an Angular / Node.js application to a different computer

Determining if a component is nested within itself in Angular 6 is a crucial task

Angular - developing a custom web element to enhance the project