ng build failed: sass error: null is not a color

Im working a project which now updates to angular 15 and while trying to setup a test environment, build/start throw this error for what seems to be related to material and themes and sass. it also seems to be related to progress bar. this is what i get: `

./src/theme/styles.scss?ngGlobalStyle - Error: Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ../../node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
   ╷
16 │     track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  ../../node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 16:18  -palette-styles()
  ../../node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 28:7   @content
  ../../node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5     @content
  ../../node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3     disable-mdc-fallback-declarations()
  ../../node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3     using-mdc-theme()
  ../../node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3   color()
  ../../node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7   @content
  ../../node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  ../../node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3   theme()
  ../../node_modules/@angular/material/core/theming/_all-theme.scss 47:5            @content
  ../../node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  ../../node_modules/@angular/material/core/theming/_all-theme.scss 44:3            all-component-themes()
  ../../node_modules/@angular/material/core/color/_all-color.scss 15:3              all-component-colors()
  src/theme/styles.scss 49:3                                                        root stylesheet

how do i begin with this? sorry for the low description if someone guide me for further details if would be great.

I tried to update to angular 15 and start a local testing environment with ng build or ng start but it stuck on this.

i have this at styles.scss:

@include mat.all-component-colors($myapp-theme); // Progress bars don't work without this

and this in the variables.scss file:

$myapp-theme: mat.define-light-theme($app-primary, $app-accent, $app-warn);

which is supposed to be related.

any guidence will be much appriciated.

*using node 16 npm 8 and angular 15.

Solution

The issue is with a slightly changed syntax of angular 15. first, I needed to import '@angular/material' as mat, and then I needed to adjust a new mat properties to use the mdc syntax for example for button/color.

I used the angular documentation for this fix. good luck to future stuckers.