[BUG] Cannot build library with external SCSS exports

[roman-supy-io]

Type of Issue

[x ] Bug Report
[ ] Feature Request

Description

In our project, we are using @infragistics components.
All is working well with the app builds only, but not the buildable libraries.
The issue is that @infragistics have SCSS exports property within package.json that points to the actual file, here's excerpt from package.json of that library:

"exports": {
    "./themes": {
      "sass": "./lib/core/styles/themes/_index.scss"
    }
}

and the library path in node_modules is @infragistics/igniteui-angular.

How To Reproduce

Create an angular workspace and a buildable library with ng-packagr executor.

Add a SCSS file and reference any package's SCSS that is being exported from package.json by alias.

Try to build a library.

We use @infragistics, it's a paid package from private registry.

When the SCSS file is imported directly, like @infragistics/igniteui-angular/lib/core/styles/themes, everything works as expected.
However if the import points to the alias defined in package.json which is @infragistics/igniteui-angular/themes the following build error appears:

      Can't find stylesheet to import.
     ╷
   1 │ @use '@infragistics/igniteui-angular/theming';
     │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
     libs/components/src/lib/icon/components/icon/icon.component.scss 1:1  root stylesheet
   Pass --verbose to see the stacktrace.

Note: ng-package.json already contains the needed option:

"styleIncludePaths": ["../styles/src/lib", "../components/src/lib", "../../node_modules"]

Expected Behaviour

The ng-packagr should follow the same build rules as Angular does, by being able to read not only files directly but also by alias.

Version Information

ng-packagr: 15.1.0
@angular/compiler: 15.1.0
rollup: 3.14.0
typescript: 4.8.4
rxjs: 7.8.0
node: 18.12.1
npm: 8.19.2
@infragistics/igniteui-angular: 15.0.7

[monkeycatdog]

Have the same issue, can't import folders outside the library. Have the same configuration in ng-packagr

[lkuendig]

Is there any intention to fix this? It's already broken for more than a month and no one assigned the ticket. Cannot build without the fix :(

[alan-agius4]

For the time being you can use the workaround mentioned in angular/angular-cli#23552 (comment)

[k3v3n]

Having the same issue with NX incremental build library. Only woking solution is to output the builded lib inside the node_modules. Then the stylesheet get resolved as expected. Seems like something is missing for alias of lib that does not contain the @scope prefix.

[nattySP]

+1 This is also affecting me.

[ioanbin]

Hello, any updates?

[matze1234]

+1 This is also affecting me.

[Parth7030]

+1

[tinesoft]

Hi all,

I was having the similar issue, I managed to workaround by using a relative path(libs/path/to/lib) and not the import path (@myorg/lib)

Setup:

My setup: two Angular libraries ui-styles and ui-theme, the later importing styles from the first one:

the imported library :

• libs/ui-styles/scss/file.scss
• libs/ui-styles/ng-package.json

the importing library :

• libs/ui-theme/scss/theme.scss
• libs/ui-theme/ng-package.json

Solution

1. importing styles from ui-styles in ui-theme as such:

@import 'libs/libs/ui-styles/scss/file';

2. adding the following lines in the ng-package.json of the importing library ui-theme :

{
	"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
	"dest": "../../dist/libs/ui-theme",
	"lib": {
		"entryFile": "src/index.ts",
		"styleIncludePaths": [
			"../.."
		]
	}
}

Hope it helps