d3js/Angular 8 应用程序问题

Question

I am trying to construct a tube-map with the help of d3js and Angular. I am using Angular 8 and d3 version 3.4.13. On doing npm start I'm getting a series of errors. Any leads on figuring out why that may be happening would be of great help.

Here is a link to the repository: https://github.com/reshnaz/Tubemap.git

I'm getting the below errors:

ERROR in./node_modules/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: Error: Can't resolve 'child_process' in '/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/xmlhttprequest/lib'

ERROR in./node_modules/jsdom/lib/jsdom/browser/index.js
Module not found: Error: Can't resolve 'cssstyle' in '/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib/jsdom/browser'

ERROR in./node_modules/jsdom/lib/jsdom/level2/style.js
Module not found: Error: Can't resolve 'cssstyle' in '/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib/jsdom/level2'

ERROR in./node_modules/jsdom/lib/jsdom.js
Module not found: Error: Can't resolve 'fs' in '/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib'

ERROR in./node_modules/jsdom/lib/jsdom/level2/html.js
Module not found: Error: Can't resolve 'fs' in '/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib/jsdom/level2'

ERROR in./node_modules/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: Error: Can't resolve 'fs' in '/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/xmlhttprequest/lib'

ERROR in./node_modules/jsdom/lib/jsdom.js
Module not found: Error: Can't resolve 'request' in '/home/reshma/Documents/Angular/tubemap_project/tubemap-dashboard/node_modules/jsdom/lib'

Answer 1

I cannot believe the problem is caused by anything other than the old version of d3 you are using.

The errors you are seeing about missing modules are likely to be because you ran npm install and this generated a load of errors which you either failed to notice or deliberately ignored, and tried to proceed anyway as if nothing was wrong. Or maybe npm install ran fine but your node_modules folder contains a load of cruft left over from the React.js project? What happens if you delete your node_modules folder and try running npm install again?

How the original React.js app you mention worked I can't say, especially since you don't provide a link to the GitHub source code you mention. Perhaps it used an older version of React, which in turn required other older dependencies. Deciding to use the latest version of Angular is somewhat at odds with deciding to use such an old version of d3 in the same project.

The only suggestion I have (if it isn't already obvious) is to bite the bullet and upgrade your project to the latest version of d3. Yes, you will have to change the way your code calls to d3, as d3 has changed somewhat between version 3 and version 5. But that's just too bad.

Answer 2

Deleting node_modules and package-lock.json, followed by npm cache clean and npm install solved the problem.