Error in d3.js after upgrading to 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.

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

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

回答2:

Angular 8 decided to put type="module" to the index.html when you target es2015+. In my example I used es2017 successfully with Angular 7, of course including d3 (via plotly.js). I haven't found any solution except to modify the dist/index.html once it's changed. For me this is a perfectly working solution as the generated code works fine.

To do the same, install first https://www.npmjs.com/package/@angular-builders/custom-webpack and configure it like they describe it. After creating the extra-webpack.config.js you put in this file 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'),
  ],
}

来源：https://stackoverflow.com/questions/57141011/error-in-d3-js-after-upgrading-to-angular-8