Include assets when building angular library

21
votes

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.

3
angularangular-cliassetsangular-libraryng-packagr
Something to read: github.com/angular/angular-cli/issues/11071 - R. Richards
is the assets folder included in angular.json? - Reza
Yes, I included it under options, however now it gives me Schema validation error: Data path "" should NOT have additional properties(assets). - Aivaras Kriksciunas
Assets folder should be included in an angular.json project only in an angular app. For a library, you will receive the error @AivarasKriksciunas had. You'll have to add it in the ng-package.json of the targeted library under the projects folder - Raphaël Balet
You can take another aproach: include the icons in the library like show this link:netbasal.com/… - Eliseo

3 Answers

38
votes

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:

  1. Add an assets folder at the root of your library project
    enter image description here
  2. Add "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"
  }
}
  1. ng build custom-project --prod. It then appear in your dist folder
    enter image description here

Then you could just add what you want in this folder

Additional tips : Use it within your project

Then if you wish to use it into the project it get imported into, do :

Assets, js, styles in angular.json

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"
   ]
 }

Js as part of the app.module

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'
12
votes

Like you said in your answer, there wasn't possible to force the packager to pack assets along with the build files.

Now, ng-packagr released a new version that allows you to include the assets along with the build files:

You can copy these assets by using the assets option.

{
  "ngPackage": {
    "assets": [
      "CHANGELOG.md",
      "./styles/**/*.theme.scss"
    ],
    "lib": {
      ...
    }
  }
}

More information here: https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md

4
votes

Looking at other posts and issues on github, it looks like there is no way to force the packager to pack assets along with the build files. What I ended up doing instead is copying the assets folder to the dist folder manually before deploying it to npm. After that I would just have to tell users to manually @import the icon_font.css into one of their stylesheets.