I am building a library which contains a custom icon font. However, when I build my library using ng build <library-name> --prod
, the assets folder is not included in the build, which means icons do not show up when using the production build.
I've tried multiple solutions like adding the assets
array in angular.json
and copying the assets folder to the created dist folder.
I am using Angular 8, and the library was created using angular-cli.
I tried including the fonts two ways:
using @import url( '../assets/icon_font.css' );
in one of the style files and adding ../assets/icon_font.css
to styleUrls in one of the components that require it. (icon_font.css
is the css file that includes the icon fonts)
Here's the layout of my library directory:
- src
- lib
- assets
- icon_font.css
- font files
- component that requires icons
- style sheet that has @import icon_font.css
- other components and classes
I would like the .ttf and other font files in the assets/
directory to be available in the exported dist
folder.
As already said, angular library now support assets since the v9.x of angular.
But it isn't well explained on their website. To make it work you'll have to:
"assets": ["./assets"],
into the ng-package.json
file of the library{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/icon",
"assets": ["./assets"], // <-- Add it here
"lib": {
"entryFile": "src/public-api.ts"
}
}
Then you could just add what you want in this folder
Then if you wish to use it into the project it get imported into, do :
Add those files into your angular.json
file
{
/*...*/
"assets": [ // Import every assets
{
"glob": "**/*",
"input": "./node_modules/custom-project/assets",
"output": "/assets/"
}
],
"styles" : [ // Only custom css
"node_modules/custom-project/assets/my-css-file.css"
],
"scripts" : [
"node_modules/custom-project/assets/my-js-file.js"
]
}
You could directly also add js into children file even if I'm not sure if it really lazy loading those files.
example, into your home.module.ts
file, import
import 'custom-project/assets/my-js-file.js'