How to include assets from library

[diginikkari]

I don't know if this is feature request or just hope to have better guidance.

If I create e.g. widget library which should have some basic placeholder icons etc. how these assets can be added to builds?

[jschwarty]

You can take a look at this guide on assets in the Angular CLI. It allows you to configure static assets for each "app". And you can use pathing to any folder within the "project". So you can have assets in your app/myapp dir, or you could create a lib for assets and put them in there. Then you just need to configure your assets array property per app to make sure the Angular CLI includes those in the build/serve.

Hopefully we will have an example Nx Workspace repo in the near future that will have examples of this type of setup and more.

[ghost]

Is it possible to specify assets in an assets property of the lib and get them copied over automatically when the module is loaded by the application?

If I understand you correctly, at the moment, you have to duplicate the assets array for each app using the assets.

[jogelin]

I tried to put an assets folder in my lib configurations but without success...

{
  "apps": [
    {
      "name": "app",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      ...
    },
    {
      "name": "lib",
      "root": "libs/lib/src",
      "test": "../../../test.js",
      "appRoot": "",
      "assets": [
        "assets"
      ]
    }
  ]
}

and my lib is containing assets in:

libs/lib/src/assets

I played also with glob in my app configuration to try to integrate the assets folder of my lib but still, without success. Someone can put a working configuration for that ?

[jared-christensen]

@jogelin I tried the same without success.

[Kiebert]

@jared-christensen try this:

"apps": [
{
"name": "appname",
"root": "apps/appname/src",
"outDir": "dist/apps/appname",
"assets": [
{ "glob": "/*", "input": "./assets/", "output": "./assets/" },
{
"glob": "/*",
"input": "../../../libs/somefolder/assets/",
"output": "./assets/"
},
{ "glob": "favicon.ico", "input": "./", "output": "./" }
],

[Flybbit]

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/asset-configuration.md#project-assets
So proper way is
{ "glob": "**/*", "input": "../../../libs/lib_name/assets/", "output": "./assets/" }

"glob": "/*" causes ERROR in EPERM: operation not permitted, stat 'P:\System Volume Information'

[OlympusatDevelopment]

I was able to get this working through a variation of what you guys wrote above.
Hope this helps someone!

    "my-project-name": {
      "projectType": "application",
      "architect": {
        "build": {
          "options": {
            "assets": [
              { "glob": "**/*", "input": "apps/my-project-name/src/assets/", "output": "./assets/" },
              {
              "glob": "**/*",
              "input": "libs/theme/assets/",
              "output": "./assets/"
              },
              { "glob": "favicon.ico", "input": "./", "output": "./" }
            ],

Now, inside of an img tag I can just write 'assets/path/to/img.jpg' and it pulls from my libs/theme/assets folder.

[naticaceres]

I have a library (projectType:library) that needs assets from my assets library.
i.e. I have an auth lib, which only houses an auth component, that needs its background and icons from my assets library.

This auth library, doesn't have any "architect" section (therefore no architect.build.options.assets section) where I can add the suggested configuration.

I tried manually creating the necessary structure, but it doesn't fix my problem, I keep getting

(Emitted value instead of an instance of Error) CssSyntaxError: myApp/my-lib/my-auth-component.component.scss Can't resolve './my-assets-lib/assets/logos/my-logo.jpg' my-auth/lib/main

has anyone been able to consume an asset from an asset library into another library?
what am I doing wrong? any ideas? (just ran nx migrate, was working with v 11.1 before and it did't explode in the build like it does now)

[dommyboy]

i am also unable to share assets between libraries, it seems only libraries to applications for now

[bombillazo]

Any recommendation on how to do this in a React Native/Expo project?

[dev-sampsonorson]

You can share assets between libraries when you when the library consuming the asset library is type @nrwl/workspace, meaning generated with nx g @nrwl/workspace:lib ...

[bombillazo]

Thanks, I meant how does one share assets such as images (.png, .jpg, .gif, etc), videos (.mp4, .mov), audio (.mp3, .wav), etc

[josipfrljic94]

How to make same thing, but with vite setup, with webpack this setup:
{ "glob": "**/*", "input": "apps/my-project-name/src/assets/", "output": "./assets/" }, { "glob": "**/*", "input": "libs/theme/assets/", "output": "./assets/" },
works, but that not case with vite. Vite by default read assets in apps/ourapp/src/assets or apps/ourapp/public/assets, i tried with copy plugin but i find that bad solution. Anyone have some idea?

[sancelot]

@josipfrljic94 as stated in this thread , vitejs/vite#8106 , a copy plugin does not seem a bad idea.
I achived it for vite builder as follow :
install vite-plugin-static-copy
then, modify the app vite.config.json :

import path from 'node:path';
import { normalizePath } from 'vite';

export default defineConfig({ 
 plugins: [
....
    viteStaticCopy({
      targets: [
        {
          src: normalizePath(path.resolve('libs/shared/public/src', 'assets', '**', '*')),
          dest: 'toto',
        },
      ],
    }),
  ],

[nawlbergs]

I was gonna post to this thread.. having a similar issue... but decided to open a new one
#14828

[josipfrljic94]

@josipfrljic94 as stated in this thread , vitejs/vite#8106 , a copy plugin does not seem a bad idea. I achived it for vite builder as follow : install vite-plugin-static-copy then, modify the app vite.config.json :

import path from 'node:path';
import { normalizePath } from 'vite';

export default defineConfig({ 
 plugins: [
....
    viteStaticCopy({
      targets: [
        {
          src: normalizePath(path.resolve('libs/shared/public/src', 'assets', '**', '*')),
          dest: 'toto',
        },
      ],
    }),
  ],

Also, related to the question from @sancelot ,According to the vite documentation in vite.config.ts in key publicDir (https://vitejs.dev/config/shared-options.html#publicdir) a link to the asset can be added, assuming that the starting point is the location of the app.
After that, you can use the assets from the asset-lib (for example img, locales, .ect) by adding /locales/somelocales.json. It solved the problem for me, if there are any ambiguities, let me know

[adamako]

Any recommendation on how to do this in a React Native/Expo project?

@bombillazo please have found a solution about your question ?
I have to create an assets library to be use in expo and reactjs apps.
I'm looking for a solution or recommandations. Thanks

[bombillazo]

Hey @adamako, unfortunately, no. I have no straightforward way to do that without manipulating file locations during the build process.

[adamako]

@bombillazo maybe there is no solution right now. Thank you

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.