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

Question

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

michaelfaith opened this issue 3 years ago · 4 comments

michaelfaith commented 3 years ago

🐞 Bug report

Command (mark with an `x`)

Is this a regression?

No

Description

Per this discussion: #16980 (comment)
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: angular/components#25242

Answer 1 · 2022-07-14T14:16:25.000Z

Somewhat related is that Sass also doesn't support package exports sass/sass#3303

Answer 2 · 2022-07-15T13:18:16.000Z

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.

Answer 3 · 2022-09-30T09:09:16.000Z

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

Answer 4 · 2022-10-31T08:03:54.000Z

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.}