1

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

到目前为止，我已经成功地在npm package私有 npm 存储库上创建了一个自定义，并通过我们的package.json. 这npm package被认为是一个核心包（所有项目团队都需要），其中包括USWDS （peer dependencies以及 USWDS 的相关依赖项，如基于标准 USWDS 标头）。bourbonbourbon-neatscsscore

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

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

4

1 回答 1

0

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

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

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

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

于 2021-12-21T16:23:41.160 回答