首页 新闻 会员 周边

angular material 从 14 升级到 16 遇到问题

0
悬赏园豆：30 [已解决问题] 解决于 2023-08-10 13:14

从 14.2.2 升级至 16.1.7 后页面样式出现问题，请问如何解决？

dudu的主页 dudu | 高人七级 | 园豆：30994
提问于：2023-08-10 12:33
< >
分享
最佳答案
0

1）运行下面的命令进行迁移，方法来自 Problems after Angular Material update from 14 to 15 的回答

ng generate @angular/material:mdc-migration

2）修复字体样式问题，在 styles/app.scss 中添加下面的代码，方法来自 Angular Material v15 Theme + Typography, default text not styled 的回答

$my-typography: mat.define-typography-config();
@include mat.typography-hierarchy($my-typography);

注：styles/app.scss 是 angular.json 中 styles 对应的路径

dudu | 高人七级 |园豆：30994 | 2023-08-10 13:13

mdc-migration 迁移后需要搜索一下代码中是否有 TODO 注释，不能自动迁移的部分会在 TODO 注释中说明

/* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
dudu | 园豆：30994 (高人七级) | 2023-08-10 17:57

升级后还需要给 <mat-list-item> 中的 <img> 加上 matListItemIcon

<mat-list-item role="listitem">
  <img matListItemIcon src="/assets/icons/check.svg">
  <div matListItemTitle>{{item}}</div>
</mat-list-item>
dudu | 园豆：30994 (高人七级) | 2023-08-10 18:14
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。