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
