9

After Upgrading to Angular 15 I want to use the legacy components in order to do a continuously migration afterwards. However the legacy components do not have all styles and look wrongly formatted.

I used the ng update to do the migration from Angular 14 to 15 and adapted the theming to use the new way mentioned in the docs (https://material.angular.io/guide/theming)

My input currently look like this
boken input field

I am using a custom angular material theme

Nicolas Gehlert
  • 2,626
  • 18
  • 39

3 Answers3

21

The problem is the styles for legacy components are not added automatically.
You need to call the mixins for the legacy themes as well. Extend your styles.scss file to look something like this (Source)

@use '@angular/material' as mat;

@include mat.core();
@include mat.legacy-core(); // this is the important line
...
// add your regular theme definition here
...
@include mat.all-component-themes($my-theme);
@include mat.all-legacy-component-themes($app-theme); // this is the important line

If you only use one or two legacy components I recommend not using the all-components mixin but rather only the ones for each module, for example

@include mat.button-theme($app-theme);
@include mat.legacy-button-theme($app-theme);

This definitely reduces the bundle size of the application a lot. Otherwise you include all the css for the other legacy components which is unused.

Nicolas Gehlert
  • 2,626
  • 18
  • 39
  • you've provided the fix when Sass preprocessor is used. Is it possible to fix the issue when the plain CSS is used? – AlexElin Feb 03 '23 at 19:45
  • @AlexElin I didn't find a way to do this with the plain css version. As you need to use the prebuild-themes for this and I didn't find a prebuild-theme that includes the legacy styles – Nicolas Gehlert Feb 10 '23 at 10:41
  • Thank you. For me I also needed `typography: mat.define-typography-config(),` in my custom theme, which your source helped me with. – WhiteKnight May 25 '23 at 11:44
  • I'm using the indigo-pink as the prebuilt theme. All the documentation shows how to create your own themes but I don't want to create any at this point - all I want is to continue to use the pre-built theme. Is there an example I could use? – Ya. Jul 24 '23 at 23:06
4

If you are using the pre-built themes you must now reference them from the following locations.

/node_modules/@angular/material/legacy-prebuilt-themes/legacy-deeppurple-amber.css
/node_modules/@angular/material/legacy-prebuilt-themes/legacy-indigo-pink.css
/node_modules/@angular/material/legacy-prebuilt-themes/legacy-pink-bluegrey.css
/node_modules/@angular/material/legacy-prebuilt-themes/legacy-purple-green.css

The previous location is now used by the MDC components. The ng update @angular/material@15 does not automatically change this location for you. In my case I had a reference to this location in my angular.json in the "styles" array. Once I updated this everything displayed correctly as it did in version 14.

Igor
  • 60,821
  • 10
  • 100
  • 175
  • I've upgraded from legacy to MDC and now using /node_modules/@angular/material/prebuilt-themes/indigo-pink.css. And I found myself the prebuilt theme overriding my customizations. Thoughts? Details here: https://stackoverflow.com/questions/76758472/prebuilt-theme-overriding-customized-settings-after-upgrading-legacy-material-to – Ya. Jul 24 '23 at 23:10
2

I noticed that the official updating guide from angular omits to run this cmd :

ng g @angular/material:mdc-migration

Thanks to this, you will be able to choose which components to migrate from legacy to MDC, and also to adapt your CSS automatically. When I run it, my app was kinda less broken. More insights here : https://medium.com/ngconf/whats-new-in-angular-material-15-a196e606a33

PIer
  • 41
  • 1
  • 4
  • yeah but this is not fixing the legacy styles but converting the legacy styles to the new MDC components when possible. And I think it is intentionally not mentioned as you do not need to do this in terms of migration but only later if you want to move away from legacy – Nicolas Gehlert Feb 10 '23 at 10:38