angularpackage.jsonng-packagr

Angular library - Ng-packagr: entrypoint and styleIncludePaths

Hello everyone happy New Year 2022! I'm currently working on my angular library and I have two issues I seem unable to fix despite the documentations and the time I've spent looking for a solution. This is what I'm trying to achieve:

  1. I'd like to setup a main entrypoint inside my angular lib so the link is cleaner
  2. I'd like to use styleIncludePaths from ng-packagr in order to shorten my SCSS imports

This is what my current architecture looks like:

enter image description here

// ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/core",
  "lib": {
    "entryFile": "src/public-api.ts",
    "styleIncludePaths": [
      "./src/lib/scss"
    ]
  },
  "assets": [
    "./src/lib/scss"
  ]
}

// package.json

"name": "@ngx-chrono-ui-kit/core",
...
"exports": {
    ".": {
      "sass": "./lib/scss/_index.scss"
    }
  }

So I'm currently calling my lib this way (the 'src' folder doesn't exist in the dist):

@import '~@ngx-chrono-ui-kit/core/lib/scss';

But I'd like to change it so it looks like this:

@import '~@ngx-chrono-ui-kit/core';

Sadly, with the above configuration it does not work:

enter image description here

Second, in my components (i.e: components/ActionBar/action-bar.component.scss) I'm calling SCSS definitions that I have defined in my SCSS folder:

@use '../../scss/abstracts/variables' as variables;
@use '../../scss/abstracts/colors' as colors;
@use '../../scss/abstracts/typography' as typography;
@use '../../scss/abstracts/mixins' as mixins;
@use '../../scss/abstracts/functions' as functions;

I would like to shorten the links so they look like this:

@use 'abstracts/variables' as variables;
@use 'abstracts/colors' as colors;
@use 'abstracts/typography' as typography;
@use 'abstracts/mixins' as mixins;
@use 'abstracts/functions' as functions;

But my IDE actually warns me that it cannot resolve the imports (and while building, it does not work as well):

enter image description here

Please if you're seeing an error in my configuration feel free to react

Solution

  • Hello and happy new year to you too! :) As for your question:

    1. styleIncludePaths is meant to be used when you want to resolve global styles within your lib during main app build: https://github.com/ng-packagr/ng-packagr/blob/master/docs/style-include-paths.md. Here is a very good explanation by user Fy Z1K that goes into detail. As far as I understand, you're attempting to export your library's own scss styles - so in this case, styleIncludePaths will not help.
    2. ng-packagr copies the ./src/lib/scss as-is, which means that after you build your library, you should reference the copied directory like this: @import '~@ngx-chrono-ui-kit/core/src/lib/scss';. ng-packagr should create the directory tree if it doesn't exist. Also, you can't shorten the URL using the "exports" package.json config because it only applies to JavaScript modules and not scss/css files: https://nodejs.org/api/packages.html#exports.

    What I can suggest as a solution is to move your library's /scss dir to the root level of the library's directory and then adjusting your ng-packagr config to match that:

    1. Move ./projects/<your-project-name>/src/lib/scss to ./projects/<your-project-name>/scss
    2. Change your "assets" config in ng-package.json to be:
    "assets": [
 "./scss"
]

    After compiling the library, you should be able to reference the copied /scss dir as ~@ngx-chrono-ui-kit/core/scss.

    Of course, moving the directory some levels up would require you to change all references to the /scss directory within the source code of the library.

    I have stumbled upon the same issue and this is the only solution I have for now.