web-dev-qa-db-ja.com

Angular 8にアップグレードした後のd3.jsランタイムエラー

Angular 6アプリケーションをAngular 8.にアップグレードします。コードはコンパイルされますが、実行時エラーがすぐに表示されます "d3.js：8 Uncaught TypeError：undefined "のプロパティ「document」を読み取れません。

D3.jsで失敗する行はvar d3_document = this.document;。 Angular 8はstrictモードでd3.jsを実行しています。最新バージョンのd3ノードモジュール（ "d3"を持っています）： "3.5.17"）、それは明らかに厳密モードをサポートしていません;私の理解は "this"はウィンドウオブジェクトを参照することになっていますが、厳密モードでは動作しません。

私は知っていますAngular 8は、おそらくより厳密なnode-sassの代わりにDart-sassを使用します。node-sassをインストールして、Dart-sassの代わりにそれを使用しようとしました（アップグレードで推奨されています）ドキュメンテーション）、しかし、これはsass関連ではないと確信しています。

他のいくつかのパッケージはAngular 6のパッケージに依存しているため、更新する必要があることに注意しますが、これが彼のd3エラーにどのように影響するかはわかりません。

"noImplicitUseStrict": false, tsconfig.jsonファイルにありますが、同じエラーを受け取りました。私も試しました"noImplicitUseStrict": true,運が悪い。

私は同じエラーに対処するこのスタックオーバーフローの投稿を参照しました： D3.js：Uncaught TypeError：Undefined of property 'document' of undefined 、および参照されているソリューション： https：// stackoverflow .com/questions/33821312/how-to-remove-global-use-strict-added-by-babel ; Angularプロジェクトで作業していて、バベルが適用されるかどうか、またはバベルオプションを変更する方法がわからないため、これらを自分の状況に適用するのに苦労しています。

完全なエラー：

d3.js:8 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:83)
    at Module../dist/core-services/fesm2015/core-services.js (core-services.js:1)
    at __webpack_require__ (bootstrap:83)
    at Module../src/app/app.component.ts (main-es2015.js:22262)
    at __webpack_require__ (bootstrap:83)
    at Module../src/app/app.module.ts (app.component.ts:21)
    at __webpack_require__ (bootstrap:83)
    at Module../src/main.ts (main.ts:1)
(anonymous) @   d3.js:8
./node_modules/d3/d3.js @   d3.js:9554
__webpack_require__ @   bootstrap:83
./dist/core-services/fesm2015/core-services.js  @   core-services.js:1
__webpack_require__ @   bootstrap:83
./src/app/app.component.ts  @   main-es2015.js:22262
__webpack_require__ @   bootstrap:83
./src/app/app.module.ts @   app.component.ts:21
__webpack_require__ @   bootstrap:83
./src/main.ts   @   main.ts:1
__webpack_require__ @   bootstrap:83
0   @   main.ts:17
__webpack_require__ @   bootstrap:83
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main-es2015.js:1

エラーは予期されていません。このノードモジュールをストリクトモードで実行しないように指定する方法はありますか？

javascriptangulard3.jsnode-modulesangular8
9
troyprince1243

昨日の朝から同じ問題が発生しましたが、修正しました。

私のpackage.json内では、次のパッケージを使用します。

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

ここでの実際の問題は、D3ライブラリがES2015/ES6に対応していないことです。

したがって、これを修正するには、Angularソリューションのtsconfig.jsonファイル内の2つの項目を変更する必要があります。

module =es2015およびesnextではない

target =es5であり、es2015ではない

したがって、完全なtsconfig.jsonは次のようになります。

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

実際のチャートを確認するには、こちらのチュートリアルをご覧ください。 http://www.exodus-cloud.co.uk/tutorials/angular-charting-nvd

13
Huw Roberts