Angular12升级14后nvd3/d3图表TypeError报错咨询

两个报错均为版本兼容+构建规则变更导致，无业务代码逻辑问题：

1. 搭配d3 3.5.17触发的Cannot read properties of undefined (reading 'document')：Angular 14默认搭载Webpack 5，其模块作用域规则与Webpack 4不同，老版本d3 v3的UMD包默认假设模块顶层this指向全局window，Webpack 5下模块顶层this被赋值为undefined，读取this.document时直接抛错。
2. 搭配d3 4.0.0触发的nv.dispatch.render_start is not a function：nvd3 1.8.5完全基于d3 v3的API开发，d3 v4做了全量不兼容的API重构，事件调度、选择器等核心逻辑全部改写，nvd3 1.8.5无法调用d3 v4的对应接口，直接报错。

按以下步骤操作即可，不需要重构现有图表业务代码：

• 固定兼容依赖版本：将package.json中的d3版本锁定为和nvd3 1.8.5匹配的v3最终版，不要使用d3 v4及以上版本

"d3": "3.5.17",
"@types/d3": "^3.5.47"

d3 v4+和nvd3 1.8.5完全不兼容，强行适配需要重写所有nvd3图表的配置、事件逻辑，迁移成本极高。

• 调整Angular构建配置：打开根目录angular.json，找到项目构建目标的build -> options节点，添加配置：

"allowedCommonJsDependencies": ["d3", "nvd3"],
"scripts": [
  "node_modules/d3/d3.min.js",
  "node_modules/nvd3/build/nv.d3.min.js"
],
"styles": [
  // 原有样式配置保留，未引入nvd3样式则新增以下配置
  "node_modules/nvd3/build/nv.d3.min.css"
]

• 修正全局对象指向：在项目src/polyfills.ts文件顶部添加一行代码，解决UMD包的全局对象寻址问题

(window as any).global = window;

如果之前是通过import * as d3 from 'd3'、import * as nv from 'nvd3'的方式引入依赖，把这些import语句删掉，直接在使用的组件里声明全局变量即可：

declare const d3: any;
declare const nv: any;

• 清理缓存重装依赖：执行命令清空旧依赖和构建缓存后重启开发服务

rm -rf node_modules package-lock.json .angular
npm install
npm start

重启完成后原有两个报错都会消失，所有已开发的nvd3图表不需要修改任何业务逻辑，即可和Angular 12环境下一样正常渲染、交互。

内容的提问来源于stack exchange，提问作者Hemanth