d3js/Angular 8 应用程序问题

Question

我正在尝试在 d3js 和 Angular 的帮助下构建一个管图。我正在使用 Angular 8 和 d3 版本 3.4.13。在执行 npm start 时，我遇到了一系列错误。任何有助于弄清楚为什么会发生这种情况的线索都会有很大帮助。

这里是存储库的链接： https://github.com/reshnaz/Tubemap.git

我收到以下错误：

./node_modules/xmlhttprequest/lib/XMLHttpRequest.js 中的错误
找不到模块：错误：无法解析“/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/xmlhttprequest/lib”中的“child_process”

./node_modules/jsdom/lib/jsdom/browser/index.js 中的错误
找不到模块：错误：无法解析“cssstyle” '/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib/jsdom/browser'

./node_modules/jsdom/lib/jsdom/level2/style.js 中的错误
找不到模块：错误：无法解析“cssstyle” '/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib/jsdom/level2'

./node_modules/jsdom/lib/jsdom.js 中的错误
找不到模块：错误：无法解析“fs” '/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib'

./node_modules/jsdom/lib/jsdom/level2/html.js 中的错误
找不到模块：错误：无法解析“fs” '/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib/jsdom/level2'

./node_modules/xmlhttprequest/lib/XMLHttpRequest.js 中的错误
找不到模块：错误：无法解析“fs” '/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/xmlhttprequest/lib'

./node_modules/jsdom/lib/jsdom.js 中的错误
找不到模块：错误：无法解析“请求” '/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib'

Answer 1

我无法相信问题是由您使用的旧版本 d3 以外的任何其他原因引起的。

您看到的有关缺少模块的错误可能是因为您运行了npm install，这会产生大量错误，您要么没有注意到，要么故意忽略了这些错误，并且无论如何都试图继续进行，好像没有任何问题一样。或者 npm install 运行良好，但您的 node_modules 文件夹包含 React.js 项目遗留的大量垃圾？如果您删除 node_modules 文件夹并再次尝试运行 npm install 会发生什么情况？

你提到的原始 React.js 应用程序是如何工作的，我不能说，特别是因为你没有提供你提到的 GitHub 源代码的链接。也许它使用了旧版本的 React，这反过来又需要其他旧的依赖项。决定使用最新版本的 Angular 与决定在同一个项目中使用如此旧版本的 d3 有点矛盾。

我唯一的建议（如果还不是很明显的话）就是咬紧牙关，将您的项目升级到最新版本的 d3。是的，您将不得不更改代码调用 d3 的方式，因为 d3 在版本 3 和版本 5 之间发生了一些变化。但这太糟糕了。

Answer 2

删除 node_modules 和 package-lock.json，然后 npm cache clean 和 npm install 解决了问题。