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!

Terrence

Ok, I think I figured out, just have to put that line in the style.css: ../node_modules/@angular/material/legacy-prebuilt-themes/*find your not legacy package* – Terrence

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

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

Commonwealth

I have different CSS what should do ? "~@angular/material/prebuilt-themes/indigo-pink.css". After Change "~@angular/material/legacy-prebuilt-themes/legacy-indigo-pink.css". So it will five error – Unconventionality

@Commonwealth i am also getting error after import legacy css – Humanoid

this just blew up my app completely. Where did you find this documentation? – Obregon

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

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

Proteose

Answer 3

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.

Gambado

Hi @Gambado how did you resolve the TODO(mdc-migration): comments left by MDC? Where can we refer which material class needs to be replaced with which equivalent class in MDC? I am really stuck at this point. – Jefferson

Answer 4

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

Levalloisian