How to include third party modules in an Angular library created using the CLI

Question

I'd like to use the Pure.css module in an Angular library created with the CLI generate library command.

I have a workspace app in which I have ran the generate library command to create the library. The library was successfully created and I was able to link it and install it in a different project. However I would like to use the grid system from the Pure.css library, in the angular.json file of the workspace app (the one containing the library), I have the styles entry in the build configuration of the library project like.

"styles": [
   "node_modules/purecss/build/pure-min.css",
   "node_modules/purecss/build/grids-responsive-min.css"
]

and in one the library's components I have a markup that uses the Pure.css rules like

<div class="pure-g">
  <div class="pure-u-1-3"><p>Thirds</p></div>
  <div class="pure-u-1-3"><p>Thirds</p></div>
  <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

But when I use the component in the external project it is clear that the styles are not being applied.

So I have imported the Pure.css styles files in the .css file of the respective component, like

@import url("node_modules/purecss/build/pure-min.css");
@import url("node_modules/purecss/build/grids-responsive-min.css");

this works, but I would like the styles from the Pure.css library to be included in the whole library instead with one component.

Is there a way to achieve this, I have done some search but could not find any resources, is it possible to maybe configure the ng-packagr to include the styles in the build of the library?

I am building the library from the containing workspace project using a script defined in the package.json file like

"build:lib": "ng-packagr -p projects/my-library-project/package.json"

And how would I install third party modules to the library project in general, do I install them via the workspace project?

Any assistance is appreciated, thanks.

Centner

It’s a bad idea to expose third party library in your library. Just add this library at the project that consumes your library and mention the dependency in library’s peerDependencies – Philipp

OK thanks I think I am getting what you mean. – Centner

@Philipp ..yes, but then "external" libraries would be responsible for importing styles from peerDependecy? – Dimitri

@Dimitri yes, that’s what peer dependencies are made for – Philipp

That's what I was afraid of. You cannot deliver library that is encapsulated and working just by importing, you must let some further config on the developer who uses the library :( – Dimitri

@Philipp now I fully understand why you said it was a bad idea to expose third party libraries in my library, but I should instead use the peerDependencies, then NPM will use the library's package.json(peerDependency) to resolve the 3rd party package in the consuming project if the consuming project or another third party package uses a different version of the package than the one required by my library(NPM will give a warning if there are these conflicts or it will install the version of the third party package defined in my library's peerDependencies). Thanks again. – Centner

you are welcome :) That's good it helped. I had really same problem some years ago and still pay for that. Life sucks :D – Philipp

Answer 1

You can import third party library inside tsconfig.json

"paths": {
  "example-ng6-lib": [
    "dist/example-ng6-lib"
  ]
}

Archiearchiepiscopacy