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 安裝解決了這個問題。