升级到 Angular 8 后 d3.js 出错答案

【问题标题】：Error in d3.js after upgrading to Angular 8升级到 Angular 8 后 d3.js 出错
【发布时间】：2019-11-30 03:12:44
【问题描述】：

我已将我的 Angular 4 应用更新为 Angular 8。应用程序在开发构建中运行良好，但在产品构建中中断。加载应用程序时出现以下错误。

未捕获的类型错误：无法读取未定义的属性“文档” 在 d3.js:8 在 Object../node_modules/d3/d3.js (d3.js:9554) 在 webpack_require (bootstrap:78) 在 Module../src/app/pages/home/dashboard/map/map.component.ts (main-es2015.js:9841) 在 webpack_require (bootstrap:78) 在 Module../src/app/pages/home/home.routes.ts (home.routes.ts:2) 在 webpack_require (bootstrap:78) 在 Module../src/app/pages/home/home.module.ts (home.event.bus.ts:5) 在 webpack_require (bootstrap:78)

我的 tsconfig.json 文件看起来像这样。

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

我尝试将目标从 es2015 更改为 es5 没有成功，并且在 vendor.js 中给了我一个错误任何帮助，将不胜感激。谢谢

【问题讨论】：

标签： angular typescript d3.js angular8

【解决方案1】：

我通过将 tsconfig.json 文件中的目标从 es2015 更改为 es5 解决了这个问题。 d3 库目前与 es2015 不兼容。

由于使用了 UTF-8 符号（例如 π），这反过来会在 d3.js 中引发错误。要解决此问题，您可以在 HTML 宿主文档上指定 UTF-8 字符集。

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

【讨论】：

我认为这不是问题所在。使用 Angular 7，可以定位 es2016/es2017，这显然与 d3 一起使用。现在升级到不再工作的 Angular 8 之后。这要么意味着 Angular 7 没有在编译中包含 d3，但现在在 v8 中包含，要么意味着 Angular 8 存在问题。

【解决方案2】：

Angular 8 决定在您定位 es2015+ 时将 type="module" 放入 index.html。在我的示例中，我成功地将 es2017 与 Angular 7 一起使用，当然包括 d3（通过 plotly.js）。除了更改 dist/index.html 后，我还没有找到任何解决方案。对我来说，这是一个完美的解决方案，因为生成的代码可以正常工作。

同样，首先安装https://www.npmjs.com/package/@angular-builders/custom-webpack 并按照他们的描述进行配置。创建 extra-webpack.config.js 后，您将以下代码放入此文件：

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'),
  ],
}

【讨论】：