d3js/Angular 8 应用程序问题

Question

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

这是存储库的链接： 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 中的错误
找不到模块：错误：无法解析“/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib/jsdom/browser”中的“cssstyle”

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

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

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

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

/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 缓存清理和 npm 安装解决了这个问题。