11

I am working on multiple small apps, which will share common and shared modules, and assets.

The part about how to create project structure was answered here: https://stackoverflow.com/a/61254557/1351452

My project folders structure is as follow: -root --projects ---app1 ---app2 ---library

  1. I want to share assets (images and fonts) between apps and library (for example I have header component with logo)
  2. I want to have one place for all the css (SCSS). Some compoents from shared library have also SCSS, but I think I should keep it separate (because within component, css code is added to index file tag)
  3. Where should I keep that shared-assets folder, how to configure it for build and how to access from each app (import scss and get images and fonts).
Improve this question

2 Answers 2

Reset to default
9

Update: Octombre-2021 Angular 12.2.0

you must add object assets:

{
  "glob": "**/*",
  "input": "assets",
  "output": "assets"
}

project structure:

root
├── assets
│   ├── logo.png
│   └── ...
└── projects
    ├── app1
    │   ├── src
    │   │   ├── assets
    │   │   └── ...
    │   └── ...
    └── app2
        ├── src
        │   ├── assets
        │   └── ...
        └── ...

angular.json:

{
  ...
  "projects": {
    "app1": {
      "projectType": "application",
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "assets": [
              "projects/app1/src/assets",
              {
                "glob": "**/*",
                "input": "assets",
                "output": "assets"
              }
            ],
          }
        }
      }
    },
    "app2": {
      "projectType": "application",
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "assets": [
              "projects/app2/src/assets",
              {
                "glob": "**/*",
                "input": "assets",
                "output": "assets"
              }
            ],
          }
        }
      }
    }
  }
}

Original

Put assets in root folder: root/assets/

and change the path to assets in angular.json

{
  ...
  "projects": {
    "app1": {
      "projectType": "application",
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "assets": [
              //  change this
              // "projects/app1/src/assets",
              "assets",
            ],
          }
        }
      }
    },
    "app2": {
      "projectType": "application",
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "assets": [
              //  change this
              // "projects/app2/src/assets",
              "assets",
            ],
          }
        }
      }
    }
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This doesn't work for me - Angular tells me The assets asset path must start with the project source root.
This approach doesn't work. This answer worked for us. stackoverflow.com/a/58739760/10941
This approach works when assets folder path is the path you want to include like projects/app2/src/assets as input value.
I had to do: "assets": ["projects/<name>/src/assets",{"glob": "**/*", "input": "assets/", "output": "assets/"}]
-1

I tried to achieve pretty much the same thing. However, I do not build my library. I just link to the library.module and use the components like that.

And now, for the shared assets:

In angular.json, I added the library's .scss to the app's build options, so it looked like this:

"styles": [
  "projects/library/src/styles.scss",
  "projects/app1/src/styles.scss"
],

I did not add the library's asset folder to the project's asset section because according to CLI "tHaT DoEsN't WoRk" (The assets asset path must start with the project source root.)

Now what?! I realised the font files I declared in my library's style.scss got copied. This lead me to this thought: What happens, if I also reference my assets in that file? So I put this in the project/library/src/styles.scss:

// fixes for library assets (they're not included if not listed here)
.its-2020-and-this-still-doesnt-work-out-of-the-box {
  background-image: url('assets/my-shared-logo.svg');
}

Then I was able to reference these assets from within my library's components like this:

<!-- library assets must be loaded from root level -->
<img src="my-shared-logo.svg" alt="" />
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.