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

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.

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.