🐞 Angular buildable lib : `Can't find stylesheet to import`

Yberion commented 3 months ago

Current Behavior

I'm getting an error trying to build a lib that contain scss using @angular/material.

On my real app, when the lib wasn't buildable it worked fine.

Maybe I'm doing something wrong with the setup or usage of scss import (@use)

Expected Behavior

No error.

GitHub Repo

https://github.com/Yberion/angular-nx

Steps to Reproduce

pnpm install --no-frozen-lockfile
pnpm run lib:test:build

Nx Report

Node   : 20.15.1
OS     : win32-x64
pnpm   : 9.5.0

nx                 : 19.4.3
@nx/js             : 19.4.3
@nx/jest           : 19.4.3
@nx/linter         : 19.4.3
@nx/eslint         : 19.4.3
@nx/workspace      : 19.4.3
@nx/angular        : 19.4.3
@nx/devkit         : 19.4.3
@nx/eslint-plugin  : 19.4.3
@nrwl/tao          : 19.4.3
@nx/web            : 19.4.3
@nx/webpack        : 19.4.3
typescript         : 5.5.3

Failure Logs

> nx run test:build:production

Building Angular Package

------------------------------------------------------------------------------
Building entry point '@angular-monorepo/test'
------------------------------------------------------------------------------
- Compiling with Angular sources in Ivy full compilation mode.
✔ Compiling with Angular sources in Ivy full compilation mode.
Copying assets
Writing package manifest
Built @angular-monorepo/test

------------------------------------------------------------------------------
Building entry point '@angular-monorepo/test/src/lib/components/button-date'
------------------------------------------------------------------------------
- Compiling with Angular sources in Ivy full compilation mode.
✖ Compiling with Angular sources in Ivy full compilation mode.
 NX   Can't find stylesheet to import.
  ╷
5 │ @use '@material/typography' as mdc-typography;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules\@angular\material\core\m2\_typography.scss 5:1                  @forward
  node_modules\@angular\material\core\m2\_index.scss 40:1                      @forward
  @angular\_index.scss 2:1                                                     @use
  libs\test\src\lib\styles\core\_colors.scss 1:1                               @use
  libs\test\src\lib\components\button-date\src\button-date.component.scss 1:1  root stylesheet
Pass --verbose to see the stacktrace.

Package Manager Version

pnpm 9.5.0

Operating System

[ ] macOS
[ ] Linux
[X] Windows
[ ] Other (Please specify)

Additional Information

I'm not sure, but there's a similar problem here https://github.com/angular/angular-cli/issues/27167

Removing parallel or setting to 1 does not fix the problem.

davidpanic commented 3 months ago

I have the exact same issue, managed to work around it by installing @material/typography (and a few others) directly (pnpm install --save @material/typography). This probably occurs due to pnpm's stricter dependency resolution requirements that make it so blazingly fast.

Yberion commented 3 months ago

Ah, maybe this won't be necessary in the futur:

https://github.com/angular/components/pull/29464

I'm also getting the same errors with:

@material/feature-targeting (inside @material/typography)
@material/theme (inside @material/typography)
@material/tokens
- Fixed in https://github.com/angular/components/pull/29468
@material/elevation
- Fixed in https://github.com/angular/components/pull/29462
@material/animation (inside @material/elevation)
@material/base (inside @material/elevation)
@material/rtl (inside @material/elevation)
@material/textfield
- Fixed in https://github.com/angular/components/pull/29400
@material/density (inside @material/textfield)
@material/floating-label (inside @material/textfield)
@material/notched-outline (inside @material/textfield)
@material/shape (inside @material/notched-outline)
@material/dom (inside @material/textfield)
@material/line-ripple (inside @material/textfield)
...

I'll just wait the next version.

I had to manually install all of them, it's the first time I'm getting this somehow. That doesn't say why it does work properly with pnpm when the lib is not buildable. Works fine when building my app that uses the (not buildable) lib.

Yberion commented 3 months ago

The probem with Angular Material is fixed starting from Angular Material 18.1.2 as they don't use packages listed above (https://github.com/angular/components/pull/29472).

The issue is still relevant as it could occure in other packages.

Coly010 commented 2 months ago

The library build here uses Angular's ng-packagr under the hood. I'm going to close this issue as it has been scoped to a particular package which has been updated and fixed. If this arises for other packages, we can reopen and address.

github-actions[bot] commented 1 month ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx