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

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 2

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",