Installing NPM packages in angular 6 workspace

Question

I am just picking up Angular 6 and CLI and have created a project as below

ng new my-demo
cd my-demo
ng g library foo --prefix=my

No in my library I want to add ngx-bootstrap as the component will need the DropdownButtonModule so my question is how do I go about installing the npm package for the library?

I would previously have just run npm install ngx-bootstrap but this will now install the package for the application, however, I need this installed for the library. Should I be cd'ing to the library folder and running npm install or is there an alternate way this is n ow done using the CLI?

Adele

Answer 1

You can continue to use npm install packagename.

The package.json is not attached to a specific application or library within your workspace, but to your complete angular/cli project. The build process (using webpack in the backend) will figure out which dependencies are actually necessary for your respective active build and drop the rest.

S

So when publishing the library, ng will know which packages are required and bundle them up within the list folder or does it not work that way? – Adele

Exactly, you can confirm this by installing a package but not adding it to your library. Then compare the pre- and post-install bundle sizes. – S

This took me ages to find this answer, thanks for clarifying. No tutorials I found mentioned this, I think it's pretty natural to incorrectly assume you put the packages into the package.json for the library you're creating! – Alby

Correction: You DO need to put dependencies into both package.json files. You only need to run npm install at the root level however. – Alby

Why then do libraries have a package.json if it's meaningless? – Prospero

I suppose it's because package.json is not only for dependencies, but also for publishing. So each project in a workspace can have its own package.json having different name, version, authors, ... – Papeterie