Include assets when building angular library

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.

Like you said in your answer, it 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.

Edit the ng-package.json file in your library (or projects/<your-lib>/ng-package.json file if you use multi-project workspace) to define the assets which should be included:

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

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

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

Reminder: tsconfig.lib.json path do not work in an angular libraries, so after your change you may have to edit manually the import of the assets with relative path

3. ng build custom-project --prod. It then appear in your dist folder
   

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'