从 Angular 16.2.14 更新到 Angular 17.3.1 后出现编译错误

Question

今天我已将我的项目从 Angular 16.2.14 更新到 17.3.1，但是当我尝试编译时出现以下错误，我该怎么解决这个问题？

./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

这是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)};
}

谢谢大家！

• 我尝试恢复到 v16 并且该项目运行良好；
• 我尝试使用材料 3 排版，但没有任何变化；
• 我尝试过上网冲浪，但更新到 v17 后没有人遇到同样的问题；
• 我尝试删除 customMaterialTheme.scss 的前 32 行（我已删除自定义代码）并且应用程序编译正确，但我遇到了巨大的可视化问题。

Answer 1

已解决。我必须删除 node_modules 文件夹和 package-lock.json 然后我重新编译并且一切正常。