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

Question

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

Строка с ошибкой в ​​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://stackoverflow.com/questions/33821312/how-to-remove-global-use-strict-added-by-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

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

Answer 1

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

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

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

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

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

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-nvd3