Use image asset in angular library

Question

I have a couple custom libraries that I load dynamically at runtime based on configuration. I can use assets in an angular application, however this does not work in my library.

Dependency in my package.json

{
  ...
  "dependencies": {
    "custom-plugin": "1.0"
  }
  ...
}

That library is installed and available in my node_modules directory:

node_modules
  -- custom-plugin
     -- lib (angular module/components here)
     -- assets
       -- image.png

I would like to reference image.png in an html template. I have tried to reference this in an html template in my component as well as outside with no luck.

HTML template, none of these work

<img src="@node_modules/custom-plugin/assets/image.png" />
<img src="assets/image.png" />
<img src="/assets/image.png" />
<img src="src/assets/image.png" />

EDIT: Running Angular 9

Tried adding "assets" property to angular.json.

"projects": {
  "mylib": {
    "projectType": "library",
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-ng-packagr:build",
        "options": {
          "tsConfig": "admin/tsconfig.lib.json",
          "project": "admin/ng-package.json",
          "assets": ["src/assets"]
        },

However when building I get the following error:

Schema validation failed with the following errors: Data path "" should NOT have additional properties(assets)

Does this answer your question? Include assets when building angular library — Naren Murali
– Naren Murali, Commented Mar 15, 2024 at 18:03
I think this answer is still applicable to your issue: stackoverflow.com/a/43443610/8013381 — Davide Passafaro
– Davide Passafaro, Commented Mar 15, 2024 at 18:10
@DavidePassafaro, see edit, I am not able to add an assets property to my librarys angular.json file without error. — lostintranslation
– lostintranslation, Commented Mar 16, 2024 at 18:40
Unrelated, but you should really think of migrating to newer Angular version, it is often painless... — Salketer
– Salketer, Commented Mar 19, 2024 at 10:16

mounds · Accepted Answer · 2024-03-21 03:55:08Z

2

An Angular Library (which your project is) requires different config to that of an Angular Application to include assets.

You need to add an 'assets' element at the root of your ng-package.json file (not the angular.json file). From there you have a few options for how to include assests:

A string of the rel path to the file (you can use wildcards)
an object containing an input, glob, and output property so you have more control over the final destination of the asset.

E.g.

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/my-lib",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": [
    "node_modules/rxjs/CHANGELOG.md",
    { "input": "node_modules/rxjs", "glob": "CHANGELOG.md", "output": "rxjs-assets" }
  ]
}

Building this lib gives me this:

This is documented here: https://github.com/ng-packagr/ng-packagr/blob/main/docs/copy-assets.md

Once you have the asset exported where you want it, you should be able to reference it in your angular application as you normal would.

answered Mar 21, 2024 at 3:55

mounds

1,38312 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lostintranslation Over a year ago

Can I also reference it in my library? That is where I am having trouble. My library exports a component, that component has a template that is trying to reference the icon. Not having any luck with that.

mounds Over a year ago

ah, so your structure is like this? app imports lib2 lib2 imports lib1 I'm not sure about angular libaries depending on each other. There seem to lots of people having similar issues.

Tony Brasunas Aug 27 at 19:22

No, I think the issue here is using the image in the same library. No nested lib dependencies. Just using images in a library. That's the issue.

androbin · Accepted Answer · 2024-03-19 10:01:36Z

1

Any folder can be added to the assets configuration. See the documentation

Add the @node_modules/custom-plugin/assets/ folder.

  {
    "glob": "**/*",
    "input": "@node_modules/custom-plugin/assets/",
    "output": "/custom-plugin-assets/"
  }

answered Mar 19, 2024 at 10:01

androbin

1,76918 silver badges34 bronze badges

Collectives™ on Stack Overflow

Use image asset in angular library

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related