angular angular-material angular15 angular-migration angular-material-15

mat-typography error after migrating angular 14 to 15

I'm attempting to migrate Angular 14 to 15. I have FrontDesk/FrontDesk.UserInterface project have updated all the packages to Angular 15.You can check the screenshot below.

I executed executing material:mdc-migration in FrontDesk/FrontDesk.UserInterface. After that I tried to build the project it threw errors in dependent project. Shared/Shared.UserInterface2 is dependent project and it do not have angular.json file. I was able to install Angular & Material 15 but unable to execute command ng upgrade material:mdc-migration. Then attempted migrated manually in dependent project. I was able to fix most errors. But finally I am unable to resolve this last two error in angular-material.scss file.

angular-material.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
);

The only issue I unable to load typography in angular.material.scss. Or else I am able to build project. Where should I update theme object?

Thanks in Advance ;) I have update question as per @Naren Murali

Solution

UPDATE:

Try rewriting the file to below.

//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((
  color: (
    primary: $clinicient-material-app-primary-palette,
    accent: $clinicient-material-app-accent-palette,
    warn: $clinicient-material-app-warn-palette,
  ),
  typography: $clinicient-material-typography,
));

In angular 15, you can define the theme directly on the theme object like below.

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

Below is an example of how the typography config inner property should look like.

$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),
);

mat-typography error after migrating angular 14 to 15

UPDATE:

Reference Answer - millenion answer