Angular 在多个应用程序内共享资产

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

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