共享 UI 组件答案

【问题标题】：Shared UI component共享 UI 组件
【发布时间】：2019-02-04 12:37:48
【问题描述】：

我正在为我的团队创建一个可共享的 UI 组件的项目。此项目使用Angular CLI 构建，并使用 USWDS 框架。

到目前为止，我已经成功地在私有 npm 存储库上创建了自定义 npm package，并通过 package.json 将其添加到我们的主项目中。这个特定的npm package 被认为是一个核心包（所有项目团队都需要），其中包括USWDS 的peer dependencies（以及USWDS 的相关依赖项，如bourbon、bourbon-neat）、项目的自定义@ 987654328@（包括core USWDS 样式的覆盖，以及一个标头组件（基于标准 USWDS 标头）。

我遇到的问题与我的header.component.html 中的图片页面有关。我当前使用的路径是./assets/uswds/img/close.svg，当标头是主项目的一部分时，它可以工作。这些图像位于 USWDS 包的 node_modules 目录中，这将使它成为我的自定义包的兄弟。此外，图像目录已添加到angular-cli.json，因此当我们运行ng serve 时图像可用。

如何更新文件路径以使其正确显示？

【问题讨论】：

标签： angular npm angular-cli npm-pack uswds

【解决方案1】：

在可共享组件库中，将angular.json资产中的USWDS图像复制到库assets目录中，如下所示

   {
      "glob": "*",
      "input": "node_modules/uswds/dist/img",
      "output": "assets/uswds/dist/img"
   }

库打包后，USWDS 图像将成为它的一部分，位于dist 目录中。

然后您可以使用此路径 assets/uswds/dist/img/close.svg 链接到 HTML 中的图像

【讨论】：