How to require assets in a library

Type of Issue

[ ] Bug Report
[x] Feature Request

Description

Many components of my library uses SVGs (icons, various illustrations, etc).

Until version 9 I simply required them in the component :

const imagePath = require('./assets/images/404.svg');
// used with [src] or a component that takes an url input

This worked by copying my assets folder inside dist/fesm5 before publishing. There where no error or warning while building the library and the application builded fine as well.

Now with Angular 9 and the latest version of ng-packr this no longer works. This error happens when building the library :

ERROR: Could not resolve ‘./assets/images/404.svg’ from dist/esm2015/components/core/not-found/not-found.component.js

I understand that there is a new official option for handling assets but this seems to only cover assets exposed by a library and used by an application.

What about assets used by the library itself ?

Version Information

$ node_modules/.bin/ng-packagr --version
ng-packagr: 9.1.1
@angular/*: 9.1.2
typescript: 3.8.3
rxjs: 6.5.5
node: 10.16.2
yarn: 1.22.0

[alan-agius4]

You should inline your assets in components css file and from the template use a class.

https://github.com/ng-packagr/ng-packagr/blob/master/docs/embed-assets-css.md

requiring an image is a webpack specific feature, and is not supported by the Angular CLI see https://github.com/angular/angular-cli/issues/17400#issuecomment-609744000

[github-actions[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

_{This action has been performed automatically by a bot.}