将角度 14 迁移到 15 后出现垫子排版错误

Question

我正在尝试将 Angular 14 迁移到 15。我有 FrontDesk/FrontDesk.UserInterface 项目已将所有软件包更新为 Angular 15。您可以查看下面的屏幕截图。

我在FrontDesk/FrontDesk.UserInterface中执行了material:mdc-migration。 之后，我尝试构建项目，但它在依赖项目中引发了错误。 Shared/Shared.UserInterface2 是依赖项目，它没有

angular.json

文件。我能够安装 Angular & Material 15，但无法执行命令

ng upgrade material:mdc-migration

。然后尝试在依赖项目中手动迁移。我能够修复大多数错误。但最终我无法解决 angular-material.scss 文件中的最后两个错误。

角材料.scss

/* ui2/angular-material */

// output-less includes

@use '@angular/material' as mat;

@use 'angular-material.declarations' as mat-decl;
@use 'clinicient-ui.declarations' as clinicient-ui;
@use 'clinicient-ui/mixins' as mixins;
 
//if I comment below two lines I am able to build project.
@include mat.core();
@include mat.typography(mat-decl.$clinicient-material-typography);
@include mat.all-component-typographies(mat-decl.$clinicient-material-app-theme);

//wrapped in body so identical selectors favor our styles over Material's
body {
  @import 'angular-material/form-field';
  @import 'angular-material/label';
  @import 'angular-material/cdk';
  //@import 'angular-material/ripple';
  @import 'angular-material/button';
  @import 'angular-material/button-toggle';
  @import 'angular-material/icon';
  @import 'angular-material/list';
  @import 'angular-material/badge';
  @import 'angular-material/card';
  @import 'angular-material/checkbox';
  @import 'angular-material/chip';
  //@import 'angular-material/option';
  @import 'angular-material/tabs';
  //@import 'angular-material/autocomplete';
  @import 'angular-material/datepicker';
  @import 'angular-material/input';
  @import 'angular-material/select';
  //@import 'angular-material/slider';
  @import 'angular-material/slide-toggle';
  @import 'angular-material/sidenav';
  @import 'angular-material/snack-bar';
  @import 'angular-material/dialog';
  @import 'angular-material/expansion';
  @import 'angular-material/spinner';
  @import 'angular-material/table';
  @import 'angular-material/tooltip';
}

_angular-material.declarations.scss

//update material typography parameters as per angular 15
$clinicient-material-typography: mat.define-typography-config(
  $headline-1: mat.define-typography-level(clinicient-ui.$font-heading-1__size, clinicient-ui.$font-heading-1__size, 700),
  $headline-2: mat.define-typography-level(clinicient-ui.$font-heading-2__size, clinicient-ui.$font-heading-2__size, 700),
  $headline-3: mat.define-typography-level(clinicient-ui.$font-heading-3__size, clinicient-ui.$font-heading-3__size, 700),
  $headline-4: mat.define-typography-level(clinicient-ui.$font-primary__size, clinicient-ui.$font-primary__size, 700), // Corresponds to subheading-1
  $headline-5: mat.define-typography-level(clinicient-ui.$font-primary__size+4px, clinicient-ui.$font-primary__size+4px),
  $headline-6: mat.define-typography-level(clinicient-ui.$font-primary__size, clinicient-ui.$font-primary__size, 600),
  $body-1: mat.define-typography-level(clinicient-ui.$font-primary__size, clinicient-ui.$font-primary__size),
  $body-2: mat.define-typography-level(clinicient-ui.$font-primary__size, clinicient-ui.$font-primary__size, 600),
  $button: mat.define-typography-level(clinicient-ui.$font-primary__size, clinicient-ui.$font-primary__size, 600),
  $caption: mat.define-typography-level(clinicient-ui.$font-primary__size * 0.8),
  $font-family: clinicient-ui.$font-primary__family
);

//theme config
$clinicient-material-app-accent-palette: mat.define-palette(mat.$deep-orange-palette, A200);
$clinicient-material-app-primary-palette: mat.define-palette($clinicient-material-primary-palette, 800);
$clinicient-material-app-warn-palette: mat.define-palette(mat.$red-palette, 900);

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

我无法在 angular.material.scss 中加载排版的唯一问题。否则我就可以构建项目了。

提前致谢；） 我有@Naren Murali 的更新问题

Answer 1

在 Angular 15 中，您可以直接在主题对象上定义主题，如下所示。

$theme: mat.define-light-theme((
  color: (
    primary: $theme-primary,
    accent: $theme-accent,
    warn: $theme-warn,
  ),
  typography: mat.define-typography-config(),
));

下面是排版配置内部属性的示例。

$typography-config: mat.define-typography-config(
  $font-family: '"Open Sans", "Helvetica Neue", sans-serif',
  $headline-1: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $headline-2: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $headline-3: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $headline-4: mat.define-typography-level(34px, 40px, 400),
  $headline-5: mat.define-typography-level(24px, 32px, 400),
  $headline-6: mat.define-typography-level(20px, 32px, 400),
  $subtitle-1: mat.define-typography-level(16px, 28px, 400),
  $body-1: mat.define-typography-level(14px, 20px, 400),
  $body-2: mat.define-typography-level(14px, 20px, 400),
  $subtitle-2: mat.define-typography-level(16px, 28px, 400),
  $caption: mat.define-typography-level(12px, 20px, 400),
  $button: mat.define-typography-level(14px, 14px, 500),
);

参考答案-百万答案