Module resolution used to load styles from `angular.json` doesn't work with package `exports`

[michaelfaith]

🐞 Bug report

Command (mark with an x)

• [ ] new
• [x] build
• [x] serve
• [ ] test
• [ ] e2e
• [ ] generate
• [ ] add
• [ ] update
• [ ] lint
• [ ] extract-i18n
• [ ] run
• [ ] config
• [ ] help
• [ ] version
• [ ] doc

Is this a regression?

No

Description

Per this discussion: https://github.com/angular/angular-cli/issues/16980#issuecomment-1178961804 module resolution currently works for entries in the angular.json styles array only if the style file is declared as the package's main entry, but doesn't currently support package exports. This is ultimately problematic for working in a Yarn pnp environment. In fact, Angular Material's current ng-add logic adds one of their prebuilt styles to the angular.json using a relative path to node_modules, which is problematic on its own, but even if they adjusted it to be a package-relative path, it wouldn't work since their prebuilts are made accessible through package exports. e.g.:

"styles": [
    "@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.scss"
  ],

The request is that module resolution for loading styles (and scripts) from the angular.json is expanded to support package exports, which would allow Angular Material to adjust their ng-add to use a package-relative path instead of a node_modules relative one.

🔬 Minimal Reproduction

Within a new project, run ng add @angular/material After completion, change the styles array in the angular.json to this:

"styles": [
    "@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.scss"
  ],

Run ng serve

🔥 Exception or Error

When attempting to use the above, you get this error on build/serve, since it's treating it as a file path:

An unhandled exception occurred: ENOENT: no such file or directory, lstat 'C:\Users\<user>\Desktop\test147\@angular'

🌍 Your Environment

Angular CLI: 14.0.5
Node: 16.14.2
Package Manager: yarn 1.22.18
OS: win32 x64

Angular: 14.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.5
@angular-devkit/build-angular   14.0.5
@angular-devkit/core            14.0.5
@angular-devkit/schematics      14.0.5
@angular/cdk                    14.0.4
@angular/flex-layout            14.0.0-beta.40
@angular/material               14.0.4
@schematics/angular             14.0.5
rxjs                            7.5.5
typescript                      4.7.4

Anything else relevant? I opened a related bug in the components repo for the update to their ng-add schematic to change the prebuilt styles entry to be package-relative, once this is possible: https://github.com/angular/components/issues/25242

[alan-agius4]

Somewhat related is that Sass also doesn't support package exports https://github.com/sass/sass/issues/3303

[angular-robot[bot]]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[michaelfaith]

Woohoo! I'm stoked to see this go in. Thanks for the work on this.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}