Problems after Angular Material update from 14 to 15

Question

I'm working on an Angular project, updated from angular14 to 15, but after I install the new Material package the whole project seems visually broken. Wrong colors, margins, paddings. The project only contains css style files, not scss. I think the problem will be with the legacy material components, but how/where should I add to the project? Thanks!

Answer 1

Change css file to legacy in styles(angular.json)

F.e

from "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",

to "./node_modules/@angular/material/legacy-prebuilt-themes/legacy-pink-bluegrey.css",

Answer 2

As it is detailed in the official documentation, you need to update the material version with this command.

ng generate @angular/material:mdc-migration

Note that this update will potentially break the logic of your application, as it introduce breaking changes.

But it will provide your application with all the new angular styles.

I assume that you have already run ng update @angular/material@15

Answer 3

In my case I just ran this command. ng add @angular/material Then choose prebuilt theme from the list.

Answer 4

The solution for me was to include the legacy theme and core provided by material theming.

Additionally to core include legacy-core:

@include mat.core();
@include mat.legacy-core();

and additionally to all-component-themes include all-legacy-component-themes:

@include mat.all-component-themes($theme);
@include mat.all-legacy-component-themes($theme);

I updated with nx migrate and nx did not automatically migrate, but refactored all Material Components to Legacy. This messed up all styling completely without the themes and core included correctly.