如何在 angular 6 项目中使用 javascript npm？

Question

I am new to Angular 6 and I do not know how to use npm i d3-dtree in Angular 6. How can I use Javascript libraries using npm , especially for Angular 6?

I want to create family-tree like this fiddle using d3-dtree . Can anyone give me guide or demo how to use d3-dtree with npm in StackBlitz's link?

Answer 1

I think you can now understand npm as library installer. It definitely does more than that, eg, it can serve web pages, but think it in that way for now...

I had used plain Javascript for a long time in .html files. So it was very difficult for me to get used to how modern Javascript family works these days. For example, you do not need HTTP server to place .html files and serve web pages.

So start your Angular project in a server device using Angular CLI which is supported by npm . Then in your project folder, do npm i d3-dtree and install the library. You can import and use the library in a different way as you did inside .html files in old fashion.

Answer 2

For angular, Go inside the project and run npm install d3 angular-d3-tree Then add the module in import array in app.module.ts .

Demo: https://stackblitz.com/edit/angular-d3-tree

For more details go to https://github.com/jgpATs2w/angular-d3-tree

Hope it helps.