In Angular 12, how do I ship my library's assets?

I have a standard Angular 12 library workspace that I created through "ng generate library my-lib".

my-lib has a component that shows an image asset.

My consumer app uses my-lib component but the image fails to load (404). It looks like the assets isn't being packaged.

Here is my projects/my-lib/ng-package.json:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/pje-gateway-componentes",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": ["./assets/"]
}

• OBS1: i wouldn't like to base64 encode the image.
• OBS2: i wouldn't like to have the image sit in the consumer app.

You have few options:

Host the image on GitHub and use the url in your package, least hassle.

You just need to have the image in your base branch and point to it by getting the raw url. The url will look like below.

You can also explore, AWS s3 to serve the image (Costs money I think).

https://raw.githubusercontent.com/kai1992cool/ng-katex-2/refs/heads/feature/angular-15-upgrade/projects/ng-katex-2/src/assets/commonjs.png

Convert to base64 which you do not want.

Update the consumer app assets array to use the package assets.

angular.json

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "assets": [
              {   
                "glob": "**/*",   
                "input": "./node_modules/<package>/assets",   
                "output": "./assets/<package>" 
              }
            ],
            ....

Then point to this consumer url in your package.

<img src="/assets/image.jpg" alt="image">

In my opinion first option is best, least hassle for consumer