After upgrade from Angular 14 to 15 my UI is not shown properly

Question

I'm trying to upgrade this Angular 14 app (that I just inherited) to Angular 15 using the official guide. The goal is to continue using the angualr 14 styles if I could. I'll worry about 16 and 17 later, but I must do this soon before November. I cannot just keep using material 14 with angular 15, according to this SO Answer it says:

You have to update Angular Material because Angular Material have peer dependencies on Angular.

So if you use Angular Material 14, you have to use Anguar 14. Same for 15.

So, I ran the migrator, but after it changed most css, now I'm stuck. All of my app is breaking in styles and even functionalities. Entire sections of pages are not showing up, expecially after I changed MatDialog to MatLegacyDialog according to this SO Answer

There are other style changes when the migrator changed all mat to mat-mdc.

I setup my angular material like the following and what the migrator generated:

1. at my app-material.module.ts, I changed many modules to point to the legacy components:

    import { MatLegacyAutocompleteModule } from '@angular/material/legacy-autocomplete';
    import { MatBadgeModule } from '@angular/material/badge';
    import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
    import { MatLegacyButtonModule } from '@angular/material/legacy-button';
    import { MatButtonToggleModule } from '@angular/material/button-toggle';
    import { MatLegacyCardModule } from '@angular/material/legacy-card';
    import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
    import { MatLegacyChipsModule } from '@angular/material/legacy-chips';
    import { MatStepperModule } from '@angular/material/stepper';
    import { MatDatepickerModule } from '@angular/material/datepicker';
    import { MatLegacyDialogModule } from '@angular/material/legacy-dialog';
    import { MatDividerModule } from '@angular/material/divider';
    import { MatExpansionModule } from '@angular/material/expansion';
    import { MatGridListModule } from '@angular/material/grid-list';
    import { MatIconModule } from '@angular/material/icon';
    import { MatLegacyInputModule } from '@angular/material/legacy-input';
    import { MatLegacyListModule } from '@angular/material/legacy-list';
    import { MatLegacyMenuModule } from '@angular/material/legacy-menu';
    import { MatLegacyNativeDateModule, MatLegacyRippleModule } from '@angular/material/legacy-core';
    import { MatLegacyPaginatorModule } from '@angular/material/legacy-paginator';
    import { MatLegacyProgressBarModule } from '@angular/material/legacy-progress-bar';
    import { MatLegacyProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
    import { MatLegacyRadioModule } from '@angular/material/legacy-radio';
    import { MatLegacySelectModule } from '@angular/material/legacy-select';
    import { MatSidenavModule } from '@angular/material/sidenav';
    import { MatLegacySliderModule } from '@angular/material/legacy-slider';
    import { MatLegacySlideToggleModule } from '@angular/material/legacy-slide-toggle';
    import { MatLegacySnackBarModule } from '@angular/material/legacy-snack-bar';
    import { MatSortModule } from '@angular/material/sort';
    import { MatLegacyTableModule } from '@angular/material/legacy-table';
    import { MatLegacyTabsModule } from '@angular/material/legacy-tabs';
    import { MatToolbarModule } from '@angular/material/toolbar';
    import { MatLegacyTooltipModule } from '@angular/material/legacy-tooltip';
    import { MatTreeModule } from '@angular/material/tree';
   

2. Migrator generated this file at my node_modules/_theming.scss:

    // Forwards all public API mixins so they can be imported from a single entry point.
    // Note that we have to forward the `.import` files for backwards-compatibility with
    // projects that don't use Sass modules and include the `mat-`-prefixed mixins.
   
    @forward '../cdk/a11y/index.import';
    @forward '../cdk/overlay/index.import';
    @forward '../cdk/text-field/index.import';
   
    @forward './core/core-legacy-index';
    @forward './legacy-autocomplete/autocomplete-legacy-index';
    @forward './badge/badge-legacy-index';
    @forward './bottom-sheet/bottom-sheet-legacy-index';
    @forward './button-toggle/button-toggle-legacy-index';
    @forward './legacy-button/button-legacy-index';
    @forward './legacy-card/card-legacy-index';
    @forward './legacy-checkbox/checkbox-legacy-index';
    @forward './legacy-chips/chips-legacy-index';
    @forward './datepicker/datepicker-legacy-index';
    @forward './legacy-dialog/dialog-legacy-index';
    @forward './divider/divider-legacy-index';
    @forward './expansion/expansion-legacy-index';
    @forward './legacy-form-field/form-field-legacy-index';
    @forward './grid-list/grid-list-legacy-index';
    @forward './icon/icon-legacy-index';
    @forward './legacy-input/input-legacy-index';
    @forward './legacy-list/list-legacy-index';
    @forward './legacy-menu/menu-legacy-index';
    @forward './legacy-paginator/paginator-legacy-index';
    @forward './legacy-progress-bar/progress-bar-legacy-index';
    @forward './legacy-progress-spinner/progress-spinner-legacy-index';
    @forward './legacy-radio/radio-legacy-index';
    @forward './legacy-select/select-legacy-index';
    @forward './sidenav/sidenav-legacy-index';
    @forward './legacy-slide-toggle/slide-toggle-legacy-index';
    @forward './legacy-slider/slider-legacy-index';
    @forward './legacy-snack-bar/snack-bar-legacy-index';
    @forward './sort/sort-legacy-index';
    @forward './stepper/stepper-legacy-index';
    @forward './legacy-table/table-legacy-index';
    @forward './legacy-tabs/tabs-legacy-index';
    @forward './toolbar/toolbar-legacy-index';
    @forward './legacy-tooltip/tooltip-legacy-index';
    @forward './tree/tree-legacy-index';
   

3. and left my angular.json styles portion showing:

        "styles": [
          "node_modules/ag-grid-community/dist/styles/ag-grid.css",
          "node_modules/ag-grid-community/dist/styles/ag-theme-material.css",
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/css/custom-theme.scss",
          "../wwwroot/bootstrap/bootstrap.min.css",
          "../wwwroot/css/site.css",
          "src/styles.css",
          "src/css/styles.css",
          "src/css/styles-legacy.css",
          "src/third-party/fullcalendar/fullcalendar.min.css"
        ],
   

4. and changed my custom-theme.scss to show like this:

    @use '@angular/material' as mat;
   
    @include mat.core();
   
    $my-primary: mat.define-palette(mat.$indigo-palette, 500);
    $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
   
    $my-theme: mat.define-light-theme((
      color: (
        primary: $my-primary,
        accent: $my-accent,
      ),
      typography: mat.define-typography-config(),
      density: 0,
    ));
   
    @include mat.all-component-themes($my-theme);
   

I know that material 15 is un-avoidable, but what I can do to make my angular 15 work?

Answer 1

With the change to Angular 15 you need to include the material legacy styles. You basically just need to extend your custom-theme.scss file with

@include mat.all-component-themes($my-theme);
@include mat.all-legacy-component-themes($my-theme);

For the migration part they converted all the import to use the legacy ones. But for some reason they are not adding the all-legacy-component-themes.

A more detailed answer is found here: https://developapa.com/angular-material-legacy-styles/

If you need/want to migrate components to the new layout, I can recommend using the migration tool from angular called @angular/material:mdc-migration. This way you can migrate module per module, and they do a lot of the heavy lifting, like adapting imports and renaming custom classes. More on this topic in the documentation: https://material.angular.io/guide/mdc-migration