I'm building an angular components library, using an NX workspace. ATM I'm implementing a file-uploader. This uploader will contain an image (svg), which should be included in the library/package.
All solutions I find on the internet, require the consumer of the library to update their angular.json apps section. For me, this is an absolute no-go. Here's some of the resources I found explaining this:
I already modified my ng-package.json by adding the assets field:
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/libs/example-ng-bootstrap",
"assets": ["./assets"],
"lib": {
"entryFile": "src/index.ts"
}
}
Tried adding
"targets:build:options:assets": [
"libs/example-ng-bootstrap/src/assets"
]
to the lib angular.json section (project.json - NX angular.json V2 style), which doesn't build at all.
Tried following ng-package.json config:
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/libs/example-ng-bootstrap",
"assets": ["/dist/libs/example-ng-bootstrap/lib/assets"],
"lib": {
"entryFile": "src/index.ts"
}
}
As of the included links, it does explain how to build an NX schematic that does this for you, but then anyone who builds an app (angular workspace style) that consumes this library will probably not be able to use this schematic.
Someone else (in the github link) also mentions that some solutions only work for apps within the same NX workspace, which off course doesn't help anyone either.
I'm puzzled as to why assets delivered by libraries don't work out-of-the-box, or without modifications to the consuming application. You may as well deliver them through a USB-stick... I would be fine providing an angular schematic though.
Also, I'd rather design the icon through css, than the consumer having to update files of his own, but I'd still like to know if there's a good solution to this.
Does anyone have experience on how to deal with this in a professional way?
It seems hard to find information on how to build and publish angular schematics using NX, but this seems to be a useful link
This is my final ng-package.json:
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/libs/mycompany-ng-bootstrap",
"lib": {
"entryFile": "src/index.ts"
},
"assets": [
"./src/assets/**",
"./src/styles/**",
"./_bootstrap.scss"
]
}
After publishing the dist files, for example to NPM, I'm able to reference the assets in the angular.json
"styles": [
"node_modules/@mintplayer/ng-bootstrap/_bootstrap.scss",
"src/styles.scss"
],
It seems that now you have to add the following to your library package.json:
"exports": {
"./bootstrap.scss": "./_bootstrap.scss"
},
In other applications, you can then include these styles like this:
"styles": [
"@example/ng-bootstrap/bootstrap.scss",
"src/styles.scss"
],