5 ms·

Anyone else run into an Angular 15 styling nightmare when upgrading to the latest Material Design (MDC) release? I attempted to use the migration tool [0] for

by paws 3y ago

Anyone else run into an Angular 15 styling nightmare when upgrading to the latest Material Design (MDC) release? I attempted to use the migration tool [0] for upgrading an in-house LOB app, but unlike previous upgrades client hated the resulting UI - understandable b/c of major styling regressions everywhere - so downgraded back to 14. Angular 14 LTS support ends in November [1] and as best as I can tell, if we want to stay on a supported Angular release we're forced into a lot of custom styling work users simply don't care about. If there's some way to stay on the "legacy" [2][3] components on Angular 15 or 16, would appreciate any links/hints. Cheers [0] https://material.angular.io/guide/mdc-migration#2-run-the-migration-tool https://material.angular.io/guide/mdc-migration#2-run-the-mi... [1] https://angular.io/guide/releases#actively-supported-versions https://angular.io/guide/releases#actively-supported-version... [2] https://material.angular.io/guide/mdc-migration#form-field https://material.angular.io/guide/mdc-migration#form-field [3] https://material.angular.io/guide/mdc-migration#library-wide-changes https://material.angular.io/guide/mdc-migration#library-wide... "These changes generally improve spec-compliance and accessibility." Maybe that's great for some folks, but the client liked the UI exactly as it was.

sieabahlpark 3y ago
[dead]
Klaster_1 3y ago
I maintain two Angular applications which leverage Angular Material and where dependencies are usually kept up to date. The first one is my tiny pet project - https://github.com/Klaster1/timer-5 https://github.com/Klaster1/timer-5 - that I use daily. Updating to MDC components was straightforward and style changes did not cause much trouble. The second one is a moderately-sized enterprise app I work on as an employee. Every single component update introduces visual regressions the team had to coordinates the fixes for with the UI designer. We split the workload by similar component types, largest pain points being buttons and form controls. Total estimates are in 30-50 hours range, we plan to chip at the task bit by bit until Angular Material 17 arrives, where the legacy component are to be removed. On a side note, migrating to Ivy-enabled dependencies was on even larger time scale as dependencies had their own breaking changes we spent a ton of effort on, especially Chart.js 2->3 and ag-grid 26->29.
thethirdteacup 3y ago
It is not well documented in the Angular Material documentation, but Angular Material 15 moved the "legacy" CSS to a new file. This means that, depending on whether CSS or SCSS is used, the legacy theme has to be added to keep using the legacy components without styling issues. The legacy Angular Material components might be removed in a later version, though. [0] https://stackoverflow.com/questions/75101022/angular-material-15-styles-for-legacy-components https://stackoverflow.com/questions/75101022/angular-materia... [1] https://developapa.com/angular-material-legacy-styles/ https://developapa.com/angular-material-legacy-styles/
dwaite 3y ago
I eventually ran out of time for my toy application and just left it with styling regressions. I didn't understand the advice I used to get styling before, and the migration instructions left a big gap in understanding around what styling was expected to hang off of.
ior4uiofrjnev 3y ago
>the client liked the UI exactly as it was. That's nice, but how will we keep the tech treadmill spinning, and tech workers employed, with that kind of attidue?! /s
paws 3y ago
Thank you @thethirdteacup - that looks helpful. Because you were downvoted I can't reply directly so doing it here instead.

by paws 3y ago

sieabahlpark 3y ago

[dead]

Klaster_1 3y ago

I maintain two Angular applications which leverage Angular Material and where dependencies are usually kept up to date. The first one is my tiny pet project - https://github.com/Klaster1/timer-5 https://github.com/Klaster1/timer-5 - that I use daily. Updating to MDC components was straightforward and style changes did not cause much trouble. The second one is a moderately-sized enterprise app I work on as an employee. Every single component update introduces visual regressions the team had to coordinates the fixes for with the UI designer. We split the workload by similar component types, largest pain points being buttons and form controls. Total estimates are in 30-50 hours range, we plan to chip at the task bit by bit until Angular Material 17 arrives, where the legacy component are to be removed. On a side note, migrating to Ivy-enabled dependencies was on even larger time scale as dependencies had their own breaking changes we spent a ton of effort on, especially Chart.js 2->3 and ag-grid 26->29.

thethirdteacup 3y ago

It is not well documented in the Angular Material documentation, but Angular Material 15 moved the "legacy" CSS to a new file. This means that, depending on whether CSS or SCSS is used, the legacy theme has to be added to keep using the legacy components without styling issues. The legacy Angular Material components might be removed in a later version, though. [0] https://stackoverflow.com/questions/75101022/angular-material-15-styles-for-legacy-components https://stackoverflow.com/questions/75101022/angular-materia... [1] https://developapa.com/angular-material-legacy-styles/ https://developapa.com/angular-material-legacy-styles/

dwaite 3y ago

I eventually ran out of time for my toy application and just left it with styling regressions. I didn't understand the advice I used to get styling before, and the migration instructions left a big gap in understanding around what styling was expected to hang off of.

ior4uiofrjnev 3y ago

>the client liked the UI exactly as it was. That's nice, but how will we keep the tech treadmill spinning, and tech workers employed, with that kind of attidue?! /s

paws 3y ago

Thank you @thethirdteacup - that looks helpful. Because you were downvoted I can't reply directly so doing it here instead.