在多个应用程序之间共享Angular资源

Question

我正在开发多个小应用程序，这些应用程序将共享公共和共享模块以及资源。

如何创建项目结构的部分已在此处回答：https://dev59.com/Ubroa4cB1Zd3GeqPjmiP#61254557

我的项目文件夹结构如下： -根目录 --项目 ---应用1 ---应用2 ---库

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

- Filip Witkowski

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

- Chris

---

这对我不起作用 - Angular 告诉我 assets 资源路径必须以项目源根目录开头。 - Holzchopf

这种方法行不通。这个答案对我们有用。https://stackoverflow.com/a/58739760/10941 - Vyrotek

当assets文件夹路径是您想要包含的路径，例如projects/app2/src/assets作为input值时，此方法有效。 - akgupta

我必须执行： "assets": ["projects/<name>/src/assets",{"glob": "**/*", "input": "assets/", "output": "assets/"}] - NicolayM

Answer 2

我试图实现几乎相同的事情。但是，我没有构建我的库。我只链接到library.module并像那样使用组件。

现在，关于共享资源：

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

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

我没有将库的资产文件夹添加到项目的资产部分，因为根据CLI “tHaT DoEsN't WoRk”（资产资产路径必须以项目源根开头）

现在怎么办？！ 我意识到我在库的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="" />

- Holzchopf