共享UI组件

Question

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

到目前为止，我已经成功地在私有npm存储库上创建了一个自定义npm package，并通过我们的package.json将它添加到我们的主项目中。这个特定的npm package被认为是一个核心包(对于所有项目团队来说都是必需的)，它包括USWDS的peer dependencies (以及USWDS的相关依赖项，如bourbon、bourbon-neat)、项目的自定义scss (包括对core USWDS样式的重写)和标题组件(它基于标准的USWDS报头)。

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

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

Answer 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中的图像。