bug(schematics): ng-add prebuilt styles config isn't compatible with yarn pnp

[michaelfaith]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The current implementation of ng-add adds an entry to the angular.json styles array for whichever prebuilt style was selected, and that entry is a relative path involving node_modules, which doesn't work with yarn pnp.

Per this discussion, styles added to an application's angular.json work with module resolution, but not with styles exported via package exports, which is the case for the prebuilt styles.

e.g.

"./prebuilt-themes/indigo-pink.css": {
  "style": "./prebuilt-themes/indigo-pink.css"
},

I'm not sure what can be done to adjust this right now, until the module resolution for angular.json will work with package exports, (unless you think adding the style import to the styles.css/scss is preferable. I personally don't think it is). But once it does support exports, I believe the styles path in https://github.com/angular/components/blob/b5c935ad3f187e86aa0748cb439e793edd8b37cb/src/material/schematics/ng-add/theming/theming.ts#L111 will need to be adjusted to something like "@angular/material/prebuilt-themes/indigo-pink.css"

Expected Behavior

Ng Add should create a configuration that is compatible with yarn pnp

Actual Behavior

It doesn't currently.

Environment

• Angular: 14.0.5
• CDK/Material: 14.0.4
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows