web-dev-qa-db-fra.com

Erreur d'exécution d3.js après la mise à niveau vers Angular 8

J'expérimente la mise à niveau de mon Angular 6 application vers Angular 8. Mon code se compile, mais je reçois immédiatement une erreur d'exécution " d3.js: 8 TypeError non capturé: Impossible de lire la propriété 'document' de non défini ".

La ligne qui échoue dans d3.js est var d3_document = this.document;. Cela m'amène à croire que Angular 8 exécute d3.js en mode strict. J'ai la dernière version du module de nœud d3 ( "d3": "3.5.17" ), et il ne supporte apparemment pas le mode strict; je crois que "this" est censé référencer l'objet window mais cela ne fonctionne pas en mode strict.

Je sais Angular 8 utilise maintenant Dart-sass au lieu de node-sass, qui est censé être plus strict. J'ai essayé d'installer node-sass pour l'utiliser à la place de Dart-sass (comme recommandé par la mise à niveau documentation), mais je suis à peu près sûr que ce n'est pas lié à sass.

Je noterai que certains de mes autres packages doivent être mis à jour car ils dépendent des packages de Angular 6, mais je ne vois pas comment cela affecterait son erreur d3.

J'ai également essayé de dire explicitement "noImplicitUseStrict": false, dans mon fichier tsconfig.json, mais a reçu la même erreur. J'ai aussi essayé "noImplicitUseStrict": true, sans chance.

J'ai référencé ce message de débordement de pile qui résout la même erreur: D3.js: TypeError non capturé: Impossible de lire la propriété 'document' de non défini , et la solution référencée: https: // stackoverflow .com/questions/33821312/comment-supprimer-global-use-strict-added-by-babel ; mais j'ai du mal à les appliquer à ma situation car je travaille avec un projet Angular et je ne sais pas si babel s'applique ou comment modifier les options de babel.

Erreur complète:

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

Aucune erreur attendue. Existe-t-il un moyen de spécifier que je ne souhaite pas que ce module de nœud s'exécute en mode strict?

javascriptangulard3.jsnode-modulesangular8
9
troyprince1243

Je viens de rencontrer le même problème depuis hier matin, mais je l'ai maintenant résolu.

Dans mon package.json, j'utilise les packages suivants:

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

Le vrai problème ici est que les bibliothèques D3 ne sont pas prêtes pour ES2015/ES6.

Donc, pour résoudre ce problème, vous devez modifier 2 éléments dans le fichier tsconfig.json de votre solution Angular).

module = es2015 et NON esnext

target = es5 et PAS es2015

Ainsi, le tsconfig.json complet devrait ressembler à ceci:

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

Pour voir les graphiques en action, jetez un œil à mon tutoriel ici: http://www.exodus-cloud.co.uk/tutorials/angular-charting-nvd

13
Huw Roberts