2

I am creating an angular library which will allow us to reuse a lot of filter components that we currently use (customer search, employee search, etc). In my library, I am importing scss files into my component's scss file (in this case telerik). The problem I am running into is view encapsulation.

So how can I export a global stylesheet in the library that my applications can consume? I am needing this for testing locally and obviously production.

I've tried ng-packagr "assets", but nothing seems to happen. Do I need to update my angular.json or somehow import the libraries assets scss in my app's styles.scss?

This is my ng-package.json file if it helps.

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/filters",
  "assets": [
    "assets"
  ],
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}
Godrules500
  • 467
  • 6
  • 25

1 Answers1

1

I found this answer

I am using Angular v10. I have an Angular Library I generated with this command:

ng generate library @my-scope/my-library

My ng-packager.json (in the root of my angular library looks like this:

{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../../dist/my-scope/my-library",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": [ 
    "./assets/**/*"
  ]
}

My assets folder is in the top folder (sibling of src) of the Angular Library.

The command ng build @my-scope/my-library copies my assets folder (and all of its contents) to the dist/my-scope/my-library folder.

The other technique is to create a component in your library with ViewEncapsulation.None - that component's CSS will be added to the global styles... pretty cool, but also could be really chaotic and annoying if not managed properly...

Datum Geek
  • 1,358
  • 18
  • 23