angularcompiler-errorsangular-materialmaterial-designtypography

Compile error after update from angular 16.2.14 to angular 17.3.1


today i've updated my project from angular 16.2.14 to 17.3.1, but when i try to compile the following errors occur, what can i do to resolve this?

./src/assets/styles/customMaterialTheme.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
"headline1-font-family already has a link"
   ╷
48 │       $unused: keys.add-link(keys.combine($style, $base-key), $base-key);
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  @material\typography\_typography.scss 48:16                             set-styles-()
  @material\typography\_typography.scss 128:10                            @use
  node_modules\@material\floating-label\_floating-label-theme.scss 32:1   @forward
  @material\floating-label\_variables.scss 23:1                           @use
  node_modules\@material\textfield\_variables.scss 26:1                   @forward
  @material\_index.scss 1:1                                               @use
  node_modules\@angular\material\core\tokens\m2\mat\_form-field.scss 3:1  @use
  node_modules\@angular\material\core\tokens\m2\_index.scss 20:1          @forward
  @angular\_index.scss 17:1                                               @use
  src\assets\styles\customMaterialTheme.scss 1:1                          root stylesheet

./src/assets/styles/customMaterialTheme.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):
"headline1-font-family already has a link"
   ╷
48 │       $unused: keys.add-link(keys.combine($style, $base-key), $base-key);
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  @material\typography\_typography.scss 48:16                             set-styles-()
  @material\typography\_typography.scss 128:10                            @use
  node_modules\@material\floating-label\_floating-label-theme.scss 32:1   @forward
  @material\floating-label\_variables.scss 23:1                           @use
  node_modules\@material\textfield\_variables.scss 26:1                   @forward
  @material\_index.scss 1:1                                               @use
  node_modules\@angular\material\core\tokens\m2\mat\_form-field.scss 3:1  @use
  node_modules\@angular\material\core\tokens\m2\_index.scss 20:1          @forward
  @angular\_index.scss 17:1                                               @use
  src\assets\styles\customMaterialTheme.scss 1:1                          root stylesheet

this is the code of customMaterialTheme.scss:

@use '@angular/material' as mat;
@include mat.core();

$my-primary: mat.define-palette(mat.$deep-purple-palette);
$my-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
//$my-warn: mat.define-palette(mat.$amber-palette, 900);
$typography: mat.define-typography-config($font-family: 'Roboto');

/*
https://muhimasri.com/blogs/how-to-customize-theme-and-colors-in-material-ui/
*/

$my-theme: mat.define-light-theme((
    color: (
        primary: $my-primary,
        accent: $my-accent,
        //warn: $my-warn,
    ),
    typography: $typography,
    density: 0,
));

// Emit theme-dependent styles for common features used across multiple components.
@include mat.core-theme($my-theme);


// Emit styles for MatButton based on $my-theme
@include mat.button-theme($my-theme);

// Theme for all material components
@include mat.all-component-themes($my-theme);
@include mat.all-component-typographies($typography);   

:root {
    --primary-color: #{mat.get-color-from-palette($my-primary, default)};
    --primary-color-light: #{mat.get-color-from-palette($my-primary, 100)};
    --primary-color-text: #{mat.get-color-from-palette($my-primary, default-contrast)};
    --accent-color: #{mat.get-color-from-palette($my-accent, default)};
    --accent-color-light: #{mat.get-color-from-palette($my-accent, A100)};
    --accent-color-text: #{mat.get-color-from-palette($my-accent, default-contrast)};
}

thanks to everyone!


Solution

  • Resolved. I've had to delete node_modules folder and package-lock.json then i've recompiled and everything works.