Angular materials v16.2.12 custom theming for progress bar triggers errors

Question

I upgraded a Angular application from v14 to v16.2.12. Everything work fine but I have a problem when I run my ng build. I have this error :

./src/styles.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
node_modules/@material/theme/_css.scss:79:4: Can't resolve '../node_modules/@material/theme/data:image/svg+xml,<svg version='1.1' xmlns='http:/www.w3.org/2000/svg' xmlns:xlink='http:/www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'><circle cx='1' cy='1' r='1' fill='rgba(8, 50, 110, 0.25)'/></svg>' in 'src'

./src/styles.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
node_modules/@material/theme/_css.scss:79:4: Can't resolve '../node_modules/@material/theme/data:image/svg+xml,<svg version='1.1' xmlns='http:/www.w3.org/2000/svg' xmlns:xlink='http:/www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'><circle cx='1' cy='1' r='1' fill='rgba(244, 67, 54, 0.25)'/></svg>' in 'src'

./src/styles.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
node_modules/@material/theme/_css.scss:79:4: Can't resolve '../node_modules/@material/theme/data:image/svg+xml,<svg version='1.1' xmlns='http:/www.w3.org/2000/svg' xmlns:xlink='http:/www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'><circle cx='1' cy='1' r='1' fill='rgba(255, 128, 139, 0.25)'/></svg>' in 'src'

I customed the Angular Material theme with my own colors like this :

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
@import "@angular/material/theming";
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$dark-primary-text: #181818;
$light-primary-text: #FFFF;
$primary-palette: (
    50: #e1e6ee,
    100: #C1E4FF,
    200: #8499b7,
    300: #52709a,
    400: #2d5184,
    500: #08326e,
    600: #072d66,
    700: #06265b,
    800: #041f51,
    900: #02133f,
    A100: #748fff,
    A200: #4166ff,
    A400: #0e3cff,
    A700: #002ff4,
    contrast: (
        50: $dark-primary-text,
        100: $dark-primary-text,
        200: $dark-primary-text,
        300: $light-primary-text,
        400: $light-primary-text,
        500: $light-primary-text,
        600: $light-primary-text,
        700: $light-primary-text,
        800: $light-primary-text,
        900: $light-primary-text,
        A100: $dark-primary-text,
        A200: $light-primary-text,
        A400: $light-primary-text,
        A700: $light-primary-text,
    )
);
$front-primary: mat.define-palette($primary-palette);

$accent-palette: (
    50: #fff0f1,
    100: #ffd9dc,
    200: #ffc0c5,
    300: #ffa6ae,
    400: #ff939c,
    500: #ff808b,
    600: #ff7883,
    700: #ff6d78,
    800: #ff636e,
    900: #ff505b,
    A100: #ffffff,
    A200: #ffffff,
    A400: #fff6f6,
    A700: #ffdcde,
    contrast: (
        50: $dark-primary-text,
        100: $dark-primary-text,
        200: $dark-primary-text,
        300: $dark-primary-text,
        400: $light-primary-text,
        500: $light-primary-text,
        600: $light-primary-text,
        700: $light-primary-text,
        800: $light-primary-text,
        900: $light-primary-text,
        A100: $dark-primary-text,
        A200: $dark-primary-text,
        A400: $dark-primary-text,
        A700: $dark-primary-text,
    )
);
$front-accent: mat.define-palette($accent-palette);

// The warn palette is optional (defaults to red).
$front-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$front-theme: mat.define-light-theme((
    color: (
        primary: $front-primary,
        accent: $front-accent,
        warn: $front-warn,
    )
));
$heading-font-family: 'Roboto, sans-serif';

$typography: mat-typography-config(
    $display-4: mat-typography-level(112px, $font-family: $heading-font-family),
    $display-3: mat-typography-level(56px, $font-family: $heading-font-family),
    $display-2: mat-typography-level(45px, $font-family: $heading-font-family),
    $display-1: mat-typography-level(34px, $font-family: $heading-font-family),
    $headline: mat-typography-level(24px, $font-family: $heading-font-family),
    $title: mat-typography-level(20px, $font-family: $heading-font-family),
);

// 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($front-theme);

@include angular-material-typography($typography);

I noticed that the 3 colors that we can see in the svgs of the error message are the colors corresponding to the 500 key in my config :

fill='rgba(8, 50, 110, 0.25)' rgba(8, 50, 110, 0.25) = #08326e40 I define it here :

$primary-palette: (
    50: #e1e6ee,
    100: #C1E4FF,
    200: #8499b7,
    300: #52709a,
    400: #2d5184,
    500: #08326e, //here without the 40

fill='rgba(255, 128, 139, 0.25)' rgba(255, 128, 139, 0.25) = #08326e40 I define it here :

$accent-palette: (
    50: #fff0f1,
    100: #ffd9dc,
    200: #ffc0c5,
    300: #ffa6ae,
    400: #ff939c,
    500: #ff808b, //here without 40

And the last one is from mat.$red-palette mat.$red-palette fill='rgba(244, 67, 54, 0.25)' rgba(244, 67, 54, 0.25) = #f4433640

$red-palette: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  400: #ef5350,
  500: #f44336 // here without 40

I see this code in the progressbar directory :

@mixin _palette-styles($config, $palette-name) {
  $palette-config: map.merge($config, (primary: map.get($config, $palette-name)));
  $color-tokens: tokens-mdc-linear-progress.get-color-tokens($palette-config);

  // We can't set the `track-color` using `theme`, because it isn't possible for it to use a CSS
  // variable since MDC's buffer animation works by constructing an SVG string from this color.
  // We also can't set the `track-color` by creating our own token slot because the track-color
  // is set in the SVG string in `theme-styles`.
  @include mdc-linear-progress-theme.theme-styles((
    // TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
    // writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming
    // and doesn't match the Material design spec. For now we approximate the buffer background by
    // applying an opacity to the color of the bar.
    track-color: map.get($color-tokens, track-color),
  ));

  @include mdc-linear-progress-theme.theme($color-tokens);
}

Maybe the problem comes from here.

My angular version is 16.2.12 and Angular material version is 16.2.13

I see that when I replace this line : @include mat.all-component-themes($front-theme);

By this :

@include mat.core-theme($front-theme);
@include mat.card-theme($front-theme);
@include mat.tooltip-theme($front-theme);
@include mat.form-field-theme($front-theme);
@include mat.input-theme($front-theme);
@include mat.select-theme($front-theme);
@include mat.autocomplete-theme($front-theme);
@include mat.dialog-theme($front-theme);
@include mat.chips-theme($front-theme);
@include mat.slide-toggle-theme($front-theme);
@include mat.radio-theme($front-theme);
@include mat.slider-theme($front-theme);
@include mat.menu-theme($front-theme);
@include mat.list-theme($front-theme);
@include mat.paginator-theme($front-theme);
@include mat.tabs-theme($front-theme);
@include mat.checkbox-theme($front-theme);
@include mat.button-theme($front-theme);
@include mat.icon-button-theme($front-theme);
@include mat.fab-theme($front-theme);
@include mat.snack-bar-theme($front-theme);
@include mat.table-theme($front-theme);
@include mat.progress-spinner-theme($front-theme);
@include mat.badge-theme($front-theme);
@include mat.bottom-sheet-theme($front-theme);
@include mat.button-toggle-theme($front-theme);
@include mat.datepicker-theme($front-theme);
@include mat.divider-theme($front-theme);
@include mat.expansion-theme($front-theme);
@include mat.grid-list-theme($front-theme);
@include mat.icon-theme($front-theme);
@include mat.sidenav-theme($front-theme);
@include mat.stepper-theme($front-theme);
@include mat.sort-theme($front-theme);
@include mat.toolbar-theme($front-theme);
@include mat.tree-theme($front-theme);

because the problem comes from this code in the all-component-themes function : @include progress-bar-theme.theme($theme-or-color-config);