多个应用程序中的 Angular 共享资产答案

【问题标题】：Angular shared assets within multiple applications多个应用程序中的 Angular 共享资产
【发布时间】：2020-08-04 04:11:24
【问题描述】：

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

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

我的项目文件夹结构如下： -根 --项目 ---app1 ---app2 ---图书馆

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

【问题讨论】：

标签： angular sass angular-library

【解决方案1】：

更新：2021 年 10 月 Angular 12.2.0

你必须添加object assets:

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

项目结构：

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

原创

将资产放在根文件夹中： 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",
            ],
          }
        }
      }
    }
  }
}

【讨论】：

这对我不起作用 - Angular 告诉我 The assets asset path must start with the project source root.
这种方法行不通。这个答案对我们有用。 stackoverflow.com/a/58739760/10941

【解决方案2】：

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

现在，对于共享资产：

在angular.json 中，我将库的 .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="" />

【讨论】：