How to bundle vendor fonts when creating libraries with Angular cli

Question

I am creating a component library with the Angular CLI (v7.x) and am having trouble figuring out how I get 3rd party font assets needed for css rules to be included in my dist folder generated by ng-packagr.

Due to ng-packagr not supporting scss bundling as per this issue, I am using scss-bundle in a post build task to perform the bundling for me and to put the final bundled scss file into my dist folder.

However, some of the css rules such as font declarations include url references to relative font folders, and these I don't yet have being included in my dist folder.

So for example, in my angular library application I have styles.scss file which contains an entry to import an icon stylesheet:

@import "~primeicons/primeicons.css";

But there is a relative fonts folder where these primeicons live in my node_modules folder which are used for the css.

One approach is I could write a further post build step to bundle these and put them into a fonts folder alongside my concatenated scss file in my dist folder so they can be resolved.

I wondered if there was a smarter way, or some built in way either with ng-packager or angular-cli when building my library to do this?

Update

So I tried the approach of having a fonts folder in my library project root (actually under an assets folder) and copy this to the root of my dist folder after I build my library.

And in my playground app where I try to use the packaged styles in my actual lib I have this:

my-lib-playground/src/styles.scss

@import "../../../dist/my-lib/styles";

But when trying to build my playground app with the CLI, I get:

ERROR in ./src/styles.scss (/Users/someone/Documents/Github/my-lib-playground/node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!/Users/someone/Documents/Github/my-lib-playground/node_modules/postcss-loader/src??embedded!/Users/someone/Documents/Github/my-lib-playground/node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Error (from /Users/someone/Documents/Github/my-lib-playground/node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /Users/someone/Documents/Github/my-lib-playground/dist/my-lib-playground/styles.scss:609:56: Can't resolve './fonts/open-sans-v15-latin-700.eot' in '/Users/someone/Documents/Github/my-lib-playground/projects/my-lib-playground/src'

So my actual question:

How do I get my consuming 'playground' application to include\resolve the font files correctly when building with the cli? These are obviously trying to be resolved relative to my playground app currently. Whats the correct solution here? Or have I done something(s) totally wrong?

Another Way

Make primeng a peerDependency of my library and leave it the responsibility of the developer to add primengto their app and include the relevant style in the angular.json as per the suggested answer from Daniel below. Is this the right way, only way?

Answer 1

You should add primeicons as a peerDependency and then in the other project you should add in the angular.json the styles configuration.

"styles": [
  "node_modules/primeicons/primeicons.css",
],

After that you already have it imported so it doesn't need the import from my-lib-playground/src/styles.scss anymore.

PrimeNG has that example on the readme of the github. https://github.com/primefaces/primeng

Answer 2

The library project does not have a root directory, root directory always depends on project root where the library is consuming.

so either you have to import fonts into the main project, I know this you already tried,

so, the only option is to convert the font into base64 and assign into CSS.

convert font file to base64 - https://www.giftofspeed.com/base64-encoder/

declare font in CSS

@font-face {
    font-family: 'myfont';
    src: url(data:font/truetype;charset=utf-8;base64,<BASE64-STRING>) format('truetype');
}