Angular Material 升级之跟随Google累死大活人

一 背景：

随着Angular升级到15，Angular-material也要从14升级到15。

二 升级：

运行升级命令，@angular/cdk会相应的升级到v15

ng update @angular/material@15

虽然至此，Angular Material v15可以像原来一样工作，如下

但是在 Angular Material v15 中，许多组件已重构为基于官方的 Material Design Components for Web (MDC)。所以升级命令之后会出现两个问题。

三 问题：

1 升级之后项目中会出现许多TODO 标记。这些需要在迁移到MDC之后完成。

2 为了兼容旧版本样式，导入的material modules会相应的更改为Legacy modules，但是这些Legacy modules到17版本时将不再被支持

四 迁移：

为了解决这两个问题，我们需要完成迁移工作

1 运行以下迁移命令，这一步使得部分class名字得到更新。

ng generate @angular/material:mdc-migration

2 删除Legacy Module且处理遗留的TODO中的 -legacy

但是运行之后，发现组件的样式被破坏了，这是由于material组件重构之后style, API, event behavior变化了或者整体重写了，如下

五 样式更正:

1：CSS前缀

应用于组件的 CSS 类使用 mat-mdc- 前缀，而之前它只是一个 mat- 前缀。与旧实现中的元素大致对应的元素已被赋予相同的class名（前缀除外）。例如，按钮的host class是 mat-mdc-button，而不是 mat-button。但是，以前实现中并非所有元素在新实现中都有等效元素。

需要检查项目中组件的使用情况，并进行更正。但是由于项目大且复杂，所以我采取的方案是为每一个material组件创建一个less文件，用新的路径覆盖已经失效的class路径。

以Dialog为例，迁移前后的对比

覆盖之后

把page1, page2, page3, page4样式文件中对dialog样式的设置提取到一个文件中，以减少文件修改的数量。

2: 主题

mat.define-typography-config 定义的默认排版级别已更新，以反映 Material Design 规范的变化。

所有组件现在都具有可主题化的密度。当您添加主题混合时，将默认包含默认密度级别 (0) 的样式。

更改前后对比：

六 反思:

1: 样式文件中尽量少用第三方库自带的class名称，尽量自定义class

2: 增加测试用例，以减少升级带来的破坏