Angular shared assets within multiple applications

Question

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).

Answer 1

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",
            ],
          }
        }
      }
    }
  }
}

Answer 2

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="" />