CODEWITHSUNDEEP
angularangular-materialangular14angular15angular-migration
bugesz
bugesz

Reputation: 115

Problems after Angular Material update from 14 to 15

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!

Upvotes: 9

Views: 22158

Answers (4)

Sri Darshana
Sri Darshana

Reputation: 272

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

Upvotes: 1

A.Casanova
A.Casanova

Reputation: 1017

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

Upvotes: 14

lajuma
lajuma

Reputation: 494

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.

Upvotes: 6

tczkqq
tczkqq

Reputation: 104

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

Upvotes: 8

Related Questions