angular
MatSort: When using signals sorting does not work in production when hosted on IIS
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
when using MatSort with signals the sorting works only in development. If you move everything to production and host it on IIS the sorting no longer works
Reproduction
StackBlitz link: https://stackblitz.com/edit/39hv8b6m
Steps to reproduce:
- take standard sorting example
- change a column type to signal
- perform sorting on column
- works
- deploy to IIS with production
- perform sorting
- fails to sort
Expected Behavior
Sorting should work with signal values regardless if they system is in development or it is in production and hosted on IIS
Actual Behavior
The sorting does not work when in production and hosted on IIS.
Environment
- Angular: 20.1
- CDK/Material: 20.1
- Browser(s): Chrome, Firefox
- Operating System: Windows
I'm not sure what IIS is, but the fact that it only happens there, to me, points toward it not directly being an issue with Angular. If you are convinced that it is an issue with Angular itself, please provide more information for us to look into it
I'm not sure what IIS is, but the fact that it only happens there, to me, points toward it not directly being an issue with Angular. If you are convinced that it is an issue with Angular itself, please provide more information for us to look into it
I understand that there are sometimes busy days but replying without reading the description and barely reading the title is not the best way to engage on a public project. I would much rather receive a late reply than a nonsensical reply.
The problem is production. You can replicate the issue by passing the --configuration production flag to ng serve but since I don't see this feature commonly used I figured I could just as well note the hosting system used. At the end of the day ng serve is a development system and I didn't want to get a reply that implied that I was using ng serve beyond its intended purpose. So I chose to mention the default hosting system that can be activated on any windows machine.
As stated in the description and as can be viewed in the provided stackblitz link, this is the basic sorting example just switched to signals. Since sorting is a client side operation your assumption that hosting is to blame doesn't make any sense.
I don't see what extra info I can provide to replicate the problem that wasn't already provided in the initial issue description.
The question has nothing to do with IIS, this happens always when doing a production build and hosting it somewhere.
The root problem is that the sort implementation does not expect signal values, it expects strings or numbers. This should be clarified in the docs. Strangely, in development the sorting still works with signals, which has to do with the underlying implementation. Minimal reproduction:
console.log(signal('B') > signal('A'));
In a development build this returns true, while in a production build this returns false. This is because when using the > operator on non-primitive values, the .toString() method is called. In development, this returns a string which also contains the signal value [Signal: B] and [Signal: A], and by chance, this makes the sorting work. In production, toString() returns something cryptic which doesn't contain the value and cannot be used to bring the items into the correct order.
As a workaround, you can implement a custom sortData function on your data source, which unwraps the values from the signals.
So is there any plan to resolve this going forward or is MatTableDataSource no longer useful if you want to sort signal type values?