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

[Yberion]

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

1. pnpm install --no-frozen-lockfile
2. 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
• Windows
• Other (Please specify)

Additional Information

I'm not sure, but there's a similar problem here angular/angular-cli#27167

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

[davidpanic]

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]

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

• refactor(material/core): simplify typography setup angular/components#29464

I'm also getting the same errors with:

• @material/feature-targeting (inside @material/typography)
• @material/theme (inside @material/typography)
• @material/tokens
  • Fixed in refactor(material/core): vendor the M3 token definitions angular/components#29468
• @material/elevation
  • Fixed in refactor(material/core): simplify elevation styles angular/components#29462
• @material/animation (inside @material/elevation)
• @material/base (inside @material/elevation)
• @material/rtl (inside @material/elevation)
• @material/textfield
  • Fixed in refactor(material/form-field): simplify structural styles angular/components#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]

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

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

[Coly010]

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.