cssangularangularjsangular-materialangular17

Update angular 17


i updated my Angular application on version 17, before updating i got rid of legacy components, i am also using angular material. But after updating the angular material on 17, i have problem that components like selects, dialogs etc. are not working, lets say i click on some mat-select, nothing happened, in DOM i can see that element is there, but as if he lost all default css properties from angular material and he is not displaying in app.

I suspect it has something to do with the overlay because it mainly concerns components that appear on top as dialogs and have selects when clicked.

One thing what i set up in material.scss is this :

// hue. Available color palettes: https://material.io/design/color/
$rds-npm-ng-service-advisor-primary: mat.define-palette($sun-yellow);
// $rds-npm-ng-service-advisor-secondary: mat-palette($warranty-pro);
$rds-npm-ng-service-advisor-accent: mat.define-palette($green);

// The warn palette is optional (defaults to red).
$rds-npm-ng-service-advisor-warn: mat.define-palette(mat.$red-palette);

$rds-npm-ng-service-advisor-warn: mat.define-palette(mat.$red-palette);

// Create the theme object (a Sass map containing all of the palettes).
$rds-npm-ng-service-advisor-theme: mat.define-light-theme($rds-npm-ng-service-advisor-primary, $rds-npm-ng-service-advisor-accent, $rds-npm-ng-service-advisor-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($rds-npm-ng-service-advisor-theme);


Solution

  • I resolved it i needed to add @include mat.core(), i dont know how it is possible that angular material v16 worked well without it.