Angular library 404 loading.gif not found

Question

I currently have monorepo which contains a standard Angular application. At the same level as my app, I have an Angular workspace which contains only a library.

I did the necessary mapping in the main app to tell it where my library is. I can use the components of my lib without any problem.

I have a component called "loader" that uses a gif image that is in my assets folder. At the time of the build of the application I see that my images are well exported in the build folder but when I open the browser I receive a 404 error that it does not find my gif.

---

projects/my-lib-name/: ng-package.json

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

projects/my-lib-name/src/lib/my-module/my-folder-component: my-component.html

<img src="assets/hive-commons/img/loading.gif" alt="Loading"/>

Inside workspace-name/dist/my-lib-name/assets/img I can see my loading.gif but when I import this component in my apps I got this 404 loading.gif not found -> http://localhost:4200/assets/hive-commons/img/hive-loading-70.gif

Answer 1

In angular.json, you can extract assets from your lib and re-expose them in your project. Syntax is :

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

Of course, you can decide to expose them in ./assets instead of ./my-dependency-assets but I would not mix the app assets with the library assets as it will be a headache in case of homonym assets.

For example, in hive-commons you can rename the assets folder to hive-assets to that all your library components point to assets urls such as ./hive-assets/path/to/image.png.

Then, in your main app, you remap dist/hive-commons/hive-assets to hive-assets