Angular Material 15 styles for legacy components

Question

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

I am using a custom angular material theme

Esdraelon

Answer 1

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($app-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.

Esdraelon

you've provided the fix when Sass preprocessor is used. Is it possible to fix the issue when the plain CSS is used? – Lubin

@Lubin 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 – Esdraelon

Thank you. For me I also needed typography: mat.define-typography-config(), in my custom theme, which your source helped me with. – Residual

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? – Waterhouse

I'm new to this @NicolasGehlert... where did the $app-theme come from? Did you declare it somewhere? – Epididymis

it should be $my-theme everywhere. @Epididymis and this is just the regular theming definition that's defined in the material documentation – Esdraelon

Answer 2

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.

Sumptuary

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: #76758972 – Waterhouse

Answer 3

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

Robbinrobbins

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 – Esdraelon

@ng_dev it actually is mandatory, there is no way around because all the imports are chaning. regarding official guide you can just look in the material docs, they document this themselves material.angular.io/guide/mdc-migration – Esdraelon