Angular-builders: Extended ng-packagr builder supporting assets

[klemenoslaj]

Is your feature request related to a problem? Please describe.
Angular CLI, or more specifically ng-packagr currently does not support bundling assets with libraries.

Corresponding issue in Angular CLI: https://github.com/angular/angular-cli/issues/11071

Describe the solution you'd like
We could extend the official ng-packagr builder to copy the assets. This should be quite simple.

In addition devs would have to of course configure application assets in angular.json to copy the library assets so they are accessible during the runtime of the application.

Additional context
I would love to create a PR with this new builder, since I already have it and I think it makes sense not to create a new package, but rather contribute here.

https://github.com/angular/angular-cli/issues/11071#issuecomment-531467088

[just-jeb]

Sounds like a great idea, go ahead with the PR!

[klemenoslaj]

@just-jeb, great, I will hopefully submit it some time tomorrow :+1:

[just-jeb]

Cool. Keep in mind though it should have at least unit test coverage and ideally e2e with an example app (just like the other builders).

[just-jeb]

@klemenoslaj Any updates?

[klemenoslaj]

@just-jeb, I am sorry, I got distracted lately. Life happened.
I will find some time during the weekend to finalize it. Is that ok with you?

[mario-d-s]

There is already https://github.com/linnenschmidt/build-ng-packagr which works fine for us.
Maybe it's better to try to collaborate with the creator to merge his solution with the angular-builders package?

[klemenoslaj]

There is already https://github.com/linnenschmidt/build-ng-packagr which works fine for us.
Maybe it's better to try to collaborate with the creator to merge his solution with the angular-builders package?

That to me sounds like a splendid idea as well :+1: @just-jeb, what do you think?

[just-jeb]

I think it's a great idea. Technically it should be pretty easy. We just need @linnenschmidt consent )))

[stephen-dirtcreative]

This appears to have stalled. Is there any progress?

[klemenoslaj]

@stephen-dirtcreative this has since been implemented into ng-packagr directly.

https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md

[blemaire]

@klemenoslaj I don't believe assets copying works in libraries...

[klemenoslaj]

@klemenoslaj I don't believe assets copying works in libraries...

Please check the link I provided again.

{
  "ngPackage": {
    "assets": [ <-------- HERE
      "CHANGELOG.md",
      "./styles/**/*.theme.scss"
    ],
    "lib": {
      ...
    }
  }
}

[imnickvaughn]

hi @klemenoslaj ,

Do I use this like this? Mine doesn't look like yours...

 "my-lib": {
            "projectType": "library",
            "root": "projects/geode-lib",
            "sourceRoot": "projects/geode-lib/src",
            "prefix": "lib",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-ng-packagr:build",
                    "options": {
                        "tsConfig": "projects/geode-lib/tsconfig.lib.json",
                        "project": "projects/geode-lib/ng-package.json"
                    },
                    "assets": [
                        "projects/my-lib/src/assets",
                    ]
                },

I have been following all these threads and 'ng serve' never gets mentioned. My assets (image files) do not appear after I serve the application. This solution would fix this right? or is this literally just for "ng build"?

[klemenoslaj]

@imnickvaughn assets should be added to ng-package.json or package.json (ngPackage field), not to angular.json.

That will copy the assets to the dist folder, but it will not do anything in terms of serving/building the application. For that you will have to configure assets for your application in angular.json, like

{
  "glob": "**/*",
  "input": "./dist/library/assets",
  "output": "/assets/"
},

[imnickvaughn]

@klemenoslaj thank you for your reply and your work on this solution. The assets are being copied over!

I am now experiencing issues after installing the package.

In node modules the package file structure looks like this:
-scopedPackageName
--bundles
--esm5
...
--assets
---images
----image.jpg

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

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 do anything
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....AppDataLocalTempng-MLqnKSangular-errors.log" for further details.

I've tried moving the assets around in the node modules folder and reserving 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.