迁移至Angular Material 5.2.2后导出模块时出现报错

嘿，我来帮你搞定这个迁移的坑！从Angular Material的beta版本升级到5.x正式版，除了把Md*标签替换成Mat*，还有不少容易忽略的细节，咱们一步步排查修复：

• 检查依赖版本兼容性
  首先确认你的package.json里，@angular/material和@angular/cdk的版本都是5.2.2，而且要和你的Angular核心依赖（@angular/core、@angular/common等）版本匹配——5.x的Material要求Angular核心版本也是5.x，版本不兼容很容易导致模块找不到的错误。另外还要删掉任何残留的旧版Material依赖（比如@angular/material-beta）。

• 修正组件导入路径
  旧beta版本里我们习惯从@angular/material直接导入组件，但5.x版本采用了按需拆分的模块结构，大部分组件需要从具体的子模块导入：
  比如原来的导入：

  import { MdDialog, MdDialogRef } from '@angular/material';
  

  要改成：

  import { MatDialog, MatDialogRef } from '@angular/material/dialog';
  

  你需要检查messagebox-component.ts里的所有导入语句，把对应的Mat*组件替换成正确的子模块路径（比如MatButton对应@angular/material/button，MatSnackBar对应@angular/material/snack-bar）。

• 更新NgModule的导入配置
  旧版本可能只需要导入MaterialModule就能用所有组件，但5.x版本官方推荐按需导入具体的MatXXXModule：
  比如你用到了对话框组件，就要在对应的模块（AppModule或者你的FeatureModule）里导入MatDialogModule：

  import { MatDialogModule } from '@angular/material/dialog';
  
  @NgModule({
    imports: [
      // ...其他已导入的模块
      MatDialogModule
    ]
  })
  export class YourModule { }
  

  如果你暂时不想一个个导入，也可以用MatModule这个汇总模块（但会增加打包体积），不过更推荐按需导入。

• 清理缓存并重新构建
  有时候缓存会导致奇怪的残留问题，执行以下步骤彻底清理：

  1. 删除项目根目录的node_modules文件夹和package-lock.json文件
  2. 执行npm cache clean --force清除npm缓存
  3. 重新运行npm install
  4. 用ng serve --aot或者ng build --clean重新构建项目

• 检查模板里的属性绑定
  除了标签名从md-改成mat-，有些属性也要同步修改，比如旧的md-dialog-title要改成mat-dialog-title，md-button改成mat-button，别漏了这些细节！

内容的提问来源于stack exchange，提问作者Krishnan