Hey new to NX and love …

Hey, new to NX and love it so far.. Now I have a question about libraries :slightly_smiling_face:

I want to create a UI lib and the components from that lib should use angular flex-layout (https://github.com/angular/flex-layout/) Do I just type npm i -s @angular/flex-layout @angular/cdk in the ui lib path?

And if that’s how I should do it then will flex-layout be duplicated if the consumer of the UI lib also installs npm i -s @angular/flex-layout @angular/cdk ?

Responses:

No, you should do your npm installs at the root of your project.

Ah ok.. so I kind if “enable” the package for the whole workspace?

you install the package for the whole workspace, and then any lib/app can import it.

cool.. so then if the ui lib uses eg. mat-button (from the angular components package) and the app also imports mat-button will it be duplicates or does treeshaking handle that?

if you use webpack-bundle-analyzer, you can see how it gets compiled down, but I belive most, if not all of mat-button would end up in your vendor bundle. (so in-short, it should not be duplicated).

Sweet!.. will do some tests then :slightly_smiling_face:

And if you want to restrict importing a certain library, you could do that with TSlint rules, by setting up the root-tslint configuration to forbid the import an override that rule in the specific library to allow importing. Not sure about ESLint, if that is also possible.

oh.. last question.. docs for Material is to use ng add @angular/material should we do ng add or npn install ?

aah.. nice! thx!

you can do either. By using ng add with packages it will run any post install schematics but I don’t believe there are any with material so npm install is fine.

The lib does not contain a module file so How do I make use of eg. flex-layout in the lib?

If you generated an angular library then it would have a module.