Shared UI component

Question

I'm working on a project where I'm creating a Shareable UI component for my team. This project is built using Angular CLI and is using the USWDS framework.

So far I have been successful in creating a custom npm package on a private npm repository and adding it to our main project via our package.json. This particular npm package is considered a core package (and will be required for all project teams), which includes peer dependencies of the USWDS (and associated dependencies of the USWDS like bourbon, bourbon-neat), the project's custom scss (including overrides for core USWDS styles, and a header component (which is based on the standard USWDS header).

The issue I'm having is related to the image page in my header.component.html. The path that I'm currently using is ./assets/uswds/img/close.svg, which works when the header is part of the main project. The images are in the node_modules directory for the USWDS package, which would make it a sibling to my custom package. Additionally, the image directory has been added to the angular-cli.json so it the images are available when we run ng serve.

How would I update the file path so it is displaying correctly?

Answer 1

In the shareable component library, copy the USWDS images in the angular.json assets into the libraries assets directory like this

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

When the library is packaged up, the USWDS images will be part of it in the dist directory.

Then you can link to an image in your HTML using this path assets/uswds/dist/img/close.svg