Question

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

有关如何创建项目结构的部分已在此处回答：https://stackoverflow.com/a/61254557/1351452

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

我想在应用程序和库之间共享资产（图像和字体）（例如，我的标头组件带有徽标）
我想为所有CSS（SCSS）占有一席之地。共享库中的某些组件也具有SCSS，但我认为我应该将其分开（因为在组件内，css代码已添加到索引文件标签中）
我应该在哪里保存该共享资产文件夹，如何配置它以进行构建以及如何从每个应用程序访问（导入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中，我将库的.scss添加到了应用程序的构建选项中，因此看起来像这样：

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

我没有将库的资产文件夹添加到项目的资产部分，因为根据CLI“ tHaT DoEs N'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="" />

多个应用程序中的角度共享资产

2 个答案: