My Angular 8 NPM package is not finding its own assets

Question

My assets are being successfully copied over to my scoped npm package; however, when I install my package they are not available after serving the application.

The images within my application are looking for the path like this: https://localhost:4200/assets/images/image.jpg

In node modules the package folder structure looks like this:

-scopedPackageName

--bundles

--esm5 ...

--assets

---images

----image.jpg <----- file I want my package to see

Unable to find any good articles about how this works. Any of these would be appreciated.

I have already considered base64 encoding but the loss in quality is unsuitable for my use case.

I've tried a few things in angular.json that did not work:

"build": {
                    "builder": ...
                    "options": {
                        "outputPath": ...
                        "index": ..
                        "main": ...
                        "polyfill": ...
                        "tsConfig": ...
                        "assets": [
                            "src/assets",
                            "src/assets/images",
                            {
                                "glob": "**/*",
                                "input": "node_modules/@geode/geode-lib/assets",
                                "output": "/assets/"
                            }
                        ],
                        "styles": [...],
                        "scripts": []

AND this

"build": {
                    "builder": ...
                    "options": {
                        "outputPath": ...
                        "index": ..
                        "main": ...
                        "polyfill": ...
                        "tsConfig": ...
                        "assets": [
                            "src/assets",
                            "src/assets/images",
                          "node_modules/@geode/geode-lib/assets",
                         "node_modules/@geode/geode-lib/assets/images"
                        ],
                        "styles": [...],
                        "scripts": []

The first one doesn't give errors but does not change the outcome.

The second one gives this error:

An unhandled exception occurred: The node_modules/scopedPackageName/assets asset path must start with the project source root. See "C:\Users....\AppData\Local\Temp\ng-MLqnKS\angular-errors.log" for further details.

I've tried moving the assets around in the node modules folder and re-serving the application in hopes that I just put it in the wrong place but have not been successful in finding that place in which the package is looking.

Thanks for any insight that you can provide.

Answer 1

I created an example project for this on GitHub, see here: https://github.com/tenkmilan/angular-scoped-package-with-image

In the example there is a scoped package, it is in @myscope and the name of the package is scoped-package. After npm install the example image can be found on node_modules\@myscope\scoped-package\assets\images path.

In angular.json it is added to the assets following way:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/@myscope/scoped-package/assets",
    "output": "/assets/"
  }

In angular.json this means, that the content of ./node_modules/@myscope/scoped-package/assets will be placed in the dist folder in the assets folder. If we run npm run build command we can see, that it is really there:

And this why in the Angular template it has to be referenced following way:

<img src="assets/images/doge.jpg">