0

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.

Abinash Dash
  • 43
  • 1
  • 6

0 Answers0