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

Question

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

关于如何创建项目结构的部分已在这里回答：/sf/answers/4287819021/

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

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

Answer 1

更新：2021 年 10 月 Angular 12.2.0

\n

您必须添加对象资产：

\n

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

\n

项目结构：

\n

root\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 logo.png\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 projects\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app1\n    \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n    \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n    \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n    \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 app2\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n        \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n        \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n

\n

角度.json：

\n

{\n  ...\n  "projects": {\n    "app1": {\n      "projectType": "application",\n      ...\n      "architect": {\n        "build": {\n          ...\n          "options": {\n            ...\n            "assets": [\n              "projects/app1/src/assets",\n              {\n                "glob": "**/*",\n                "input": "assets",\n                "output": "assets"\n              }\n            ],\n          }\n        }\n      }\n    },\n    "app2": {\n      "projectType": "application",\n      ...\n      "architect": {\n        "build": {\n          ...\n          "options": {\n            ...\n            "assets": [\n              "projects/app2/src/assets",\n              {\n                "glob": "**/*",\n                "input": "assets",\n                "output": "assets"\n              }\n            ],\n          }\n        }\n      }\n    }\n  }\n}\n

\n

原来的

\n

将资源放入根文件夹中:\nroot/assets/

\n

并更改资产的路径angular.json

\n

{\n  ...\n  "projects": {\n    "app1": {\n      "projectType": "application",\n      ...\n      "architect": {\n        "build": {\n          ...\n          "options": {\n            ...\n            "assets": [\n              //  change this\n              // "projects/app1/src/assets",\n              "assets",\n            ],\n          }\n        }\n      }\n    },\n    "app2": {\n      "projectType": "application",\n      ...\n      "architect": {\n        "build": {\n          ...\n          "options": {\n            ...\n            "assets": [\n              //  change this\n              // "projects/app2/src/assets",\n              "assets",\n            ],\n          }\n        }\n      }\n    }\n  }\n}\n

\n