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

Question

我正在开发多个小型应用程序，它们将共享通用和共享模块以及资产。

关于如何创建项目结构的部分在这里得到了回答： https://stackoverflow.com/a/61254557/1351452

我的项目文件夹结构如下：-root --projects ---app1 ---app2 ---library

1. 我想在应用程序和库之间共享资产（图像和字体）（例如，我有带有徽标的 header 组件）
2. 我想为所有 css (SCSS) 提供一个地方。 共享库中的一些组件也有 SCSS，但我认为我应该将其分开（因为在组件内，css 代码已添加到索引文件标签中）
3. 我应该在哪里保存共享资产文件夹，如何配置它以进行构建以及如何从每个应用程序访问（导入 scss 并获取图像和字体）。

Answer 1

将资产放在根文件夹中： root/assets/

并更改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

我试图实现几乎相同的目标。 但是，我不建立我的图书馆。 我只是链接到 library.module 并使用这样的组件。

现在，对于共享资产：

在angular.json中，我将 library's.scss 添加到应用程序的构建选项中，所以它看起来像这样：

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

我没有将库的资产文件夹添加到项目的资产部分，因为根据 CLI “tHaT DoEsN't WoRk”（ The assets asset path must start with the project source root. ）

怎么办？。 我意识到我在库的 style.scss 中声明的字体文件被复制了：这让我想到，会发生什么？ 如果我还在该文件中引用我的资产？ 所以我把它放在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');
}

然后我可以从我的库组件中引用这些资产，如下所示：

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