I am new to Angular.
I recently migrated from 9.1 to 15.
Post that, did the mdc migration also as we have material changes in 15.
Now, while running ng serve
, the compilation is getting failed and from the stack it seems to be issue with Material UI. But not able to figure out what to check here.
./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
╷
50 │ @if custom-properties.is-custom-prop-string($text-field-height) {
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@material/textfield/_variables.scss 50:7 get-outlined-label-position-y()
node_modules/@material/textfield/_variables.scss 134:29 @forward
@material/_index.scss 1:1 @use
node_modules/@angular/material/form-field/_form-field-density.scss 4:1 @use
node_modules/@angular/material/paginator/_paginator-theme.scss 10:1 @use
node_modules/@angular/material/core/density/private/_all-density.scss 9:1 @forward
@angular/_index.scss 18:1 @use
src/styles.scss 2:1 root stylesheet
Also, in code base post mdc-migration, some TODO statements have been added to material-override.scss file. What exactly does this line mean ?
.mat-p-bar-amber {
/* TODO(mdc-migration): The following rule targets internal classes of progress-bar that may no longer apply for the MDC version.*/
::ng-deep .mat-progress-bar-fill::after {
background-color: mat.get-color-from-palette(mat.define-palette(mat.$amber-palette));
Any suggestion/help will be appreciated.