Компонент общего интерфейса

Question

Я работаю над проектом, в котором я создаю компонент Shareable UI для моей команды. Этот проект построен с использованием Angular CLI и использует структуру USWDS.

До сих пор я был успешным в создании пользовательских npm package в частном репозитории npm и добавив его в наш основной проект через наш package.json, Этот конкретный npm package считается основным пакетом (и потребуется для всех проектных команд), который включает peer dependencies USWDS (и связанных с ними зависимостей USWDS, таких как bourbon, bourbon-neat), проект заказчика scss (включая переопределения для core Стили USWDS и компонент заголовка (который основан на стандартном заголовке USWDS).

У меня проблема связана со страницей изображения в моем header.component.html, Путь, который я сейчас использую ./assets/uswds/img/close.svg, который работает, когда заголовок является частью основного проекта. Изображения находятся в node_modules каталог для пакета USWDS, который сделает его родным для моего пользовательского пакета. Кроме того, каталог изображений был добавлен в angular-cli.json так что изображения доступны, когда мы запускаем ng serve,

Как мне обновить путь к файлу, чтобы он отображался правильно?

Answer 1

В библиотеке общих компонентов скопируйте изображения USWDS из ресурсов angular.json в библиотеки. assetsтакой каталог

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

Когда библиотека упакована, образы USWDS будут ее частью в distкаталог.

Затем вы можете сослаться на изображение в своем HTML, используя этот путь assets/uswds/dist/img/close.svg