5

I am creating an angular reusable module using ngPackagr. Everything works fine there but the images that I am internally referring to are not coming up in the final build where I am installing the component. I have tried using the actions in the below thread:

https://github.com/dherges/ng-packagr/issues/123

but none of them seem to be working. Can anyone provide some help here?

Jyotirmoy Pan
  • 837
  • 2
  • 10
  • 28

1 Answers1

0

It's because you have to add those images to the angular compilation in the app that is using the package. To do so, you must edit the angular.json file of this app. Let's assume your static assets (images, fonts, etc.) in your package are inside [YOUR_PACKAGE]/assets, then you should add something like this to the angular.json file of the app implementing the package:

"build": {
    // ...,
    "options": {
      // ...,
      "assets": [
        // ...,
        {
          "glob": "**/*",
          "input": "[PATH_TO_NODE_MODULES]/[YOUR_PACKAGE]/assets",
          "output": "[PATH_TO_TARGET_PROJECT_ASSETS_FOLDER]"
        }
      ]
    }
  }

So when angular compiles, It will "grab" the assets in your package and "copy" them inside the path specified on output.

For this to work the images must be inside the distributed package, normally ngPackagr won't copy your static assets in the package so you should copy them after the build and before the publish/pack. You can do this with a package.json script, for example:

"pack": "ng build && cp -r ./src/assets dist npm pack"

or

"publish": "ng build && cp -r ./src/assets dist npm publish"

To test if your assets are getting to the final build you can run ng build --prod in the app implementing the package. This will generate a dist folder, inside this folder (or in a subfolder) you should find your package images.

Sachi Cortes
  • 884
  • 1
  • 11
  • 12