2

I'm using Angular 10 and I want to create a component library that will have some images and stylesheets. I need to be able to reference those images from within component templates defined in the component html template.

I'm pretty new to Angular, but I'm a veteran software engineer and I want to make sure we can get Angular to work within our CI environment (Jenkins). This means builds are portable (don't require hard-coded paths or parameters), automatically buildable, testable, and deployable.

I've seen this link: Angular component library - image references in templates

It doesn't appear to propose a workable solution for what I want to do.

I'm able to build, run tests, and publish our library packages to our internal npm repository.

With Angular 9+, assets get copied to the dist folder just fine, so that's not an issue.

What I can't figure out is how to reference the images from the library component's html templates. Everything I've tried results in a 404. All of the proposed solutions I've seen don't work. A number of solutions propose putting the images in encoded strings in the templates. I'd really like to avoid that, if possible, as it adds extra steps to getting assets into libraries.

I want to be able to reference the images both when testing the application in a workspace, and after the library is in an npm package. That way, it will work both when I'm building and testing in CI, and after the npm package is imported into a project.

I put the images in the library under src/assets/images.

Now, I want to use an image in, let's say, an 'img' element in one of the library's html templates.

Links I've tried (most of these I got from proposed solutions):

  • '/assets/images/myimg.png'
  • '../assets/images/myimg.png'
  • 'assets/images/myimg.png'
  • '/src/assets/images/myimg.png'

etc.

I think I tried just about every variation possible, with no luck.

Is there some configuration I need to do to get it to work? What link works to reference the assets folder from within the library? As a bonus, I'd like to reference things like fonts and stylesheets from apps that install the library, but that appears to be a lot easier (well, except for referencing them in a way that works both when testing from within a workspace containing the test app and library, and after the library is installed).

Terry Lacy
  • 75
  • 7

1 Answers1

1

This Stack Overflow answer on the thread Include assets when building library using ng-packagr might be helpful:

It suggests to add this mapping to angular.json in the project consuming the library:

{ "glob": "**/*", "input": "../node_modules/my-lib/assets", "output": "./assets/my-lib/" }

Alternatively, you might use NPM solutions like pkg-assets and npm-assets or use base64 encoded images, as described here: How to include images in an Angular library?

intagli
  • 286
  • 4
  • 5
  • 20