Ошибка выполнения d3.js после обновления до Angular 8

Я экспериментирую с обновлением моего приложения Angular 6 до Angular 8. Мой код компилируется, но я сразу же получаю ошибку во время выполнения " d3.js: 8 Uncaught TypeError: Невозможно прочитать свойство 'document' of undefined ".

Ошибка строки в d3.js var d3_document = this.document;, Это наводит меня на мысль, что Angular 8 работает в строгом режиме d3.js. У меня последняя версия модуля узла d3 ("d3": "3.5.17"), и он, очевидно, не поддерживает строгий режим; я понимаю, что "это" должно ссылаться на объект окна, но это не работает в строгом режиме.

Я знаю, что Angular 8 теперь использует dart-sass вместо node-sass, который предположительно строже. Я попытался установить node-sass, чтобы использовать его вместо dart-sass (как рекомендуется в документации по обновлению), но я уверен, что это не связано с sass.

Я отмечу, что некоторые из моих других пакетов должны быть обновлены, потому что они зависят от пакетов Angular 6, но я не вижу, как это повлияет на его ошибку d3.

Я также пытался прямо сказать "noImplicitUseStrict": false, в моем файле tsconfig.json, но получил ту же ошибку. Я также пытался "noImplicitUseStrict": true, без удачи

Я ссылался на этот пост переполнения стека, который обращается к той же ошибке: D3.js: Uncaught TypeError: Невозможно прочитать свойство 'document' из неопределенного, и ссылочное решение: https://stackru.com/questions/33821312/how-to- удалить-глобальное-использование-строгое-добавлено-babel; но мне трудно применять их в моей ситуации, потому что я работаю с проектом Angular и не уверен, применимо ли babel или как изменить параметры babel.

Полная ошибка:

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

Ожидается без ошибок. Есть ли способ указать, что я не хочу, чтобы этот модуль узла работал в строгом режиме?

Источник

0 ответов

Я только что столкнулся с той же проблемой со вчерашнего утра, но теперь я ее исправил.

В моем package.json я использую следующие пакеты:

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

Настоящая проблема здесь в том, что библиотеки D3 не готовы к ES2015/ES6.

Поэтому, чтобы это исправить, вам нужно изменить 2 элемента в файле tsconfig.json вашего решения Angular.

модуль = 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-nvd3

Источник

Мне удалось заставить его работать, включив d3 в поле "scripts" angular.json.

Источник
Другие вопросы по тегам