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

user_4536345 0
Viewed 3037

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.

angular-cli-v6 ng-packagr angular
1 Answers

You can import third party library inside tsconfig.json

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