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

Question

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

这里回答了关于如何创建项目结构的部分：

我的项目文件夹结构如下： -根 --项目 ---应用程序1 ---应用程序2 ---图书馆

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

Answer 1

更新：2021 年 10 月 Angular 12.2.0

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

Answer 2

我试图实现几乎相同的目标。但是，我不构建我的库。我只是 link 到 library.module 并使用那样的组件。

现在，对于共享资产：

在 angular.json 中，我将库的 .scss 添加到应用程序的构建选项中，因此它看起来像这样：

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

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

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

Angular shared assets within multiple applications

sass

angular

angular-library