Ошибка компиляции после обновления с angular 16.2.14 до angular 17.3.1

сегодня я обновил свой проект с 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)};
}

Спасибо всем!

  • я попытался вернуться к версии 16, и проект работает нормально;
  • я пробовал использовать типографику материала 3, но ничего не изменилось;
  • я пробовал пользоваться Интернетом, но ни у кого не возникло такой проблемы с обновлением до версии 17;
  • Я попытался удалить первые 32 строки файла customMaterialTheme.scss (я удалил код настройки), и приложение скомпилировалось правильно, но у меня возникли огромные проблемы с визуализацией.
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
277
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Решено. Мне пришлось удалить папку node_modules и package-lock.json, затем я перекомпилировал, и все работает.

Другие вопросы по теме