Angular MatDialog报错：出现在AppModule.imports无法解析为NgModule类

问题根因 #

你触发错误的原因是把非NgModule类型的MatDialogRef放到了AppModule的imports数组中，Angular的imports数组仅允许导入带@NgModule装饰器的模块，MatDialogRef是Dialog实例的类型定义，不属于模块范畴，所以会抛出无法解析为NgModule类的错误。

修复步骤 #

1. 打开app.module.ts，找到imports配置段，删除MatDialogRef这一行。
2. 如果需要全局配置Dialog的注入规则，可以将MatDialogRef添加到providers数组中，示例如下：

providers: [
  { provide: MAT_DATE_LOCALE, useValue: ITA },
  { provide: OwlDateTimeIntl, useClass: DefaultIntl },
  { provide: LOCALE_ID, useValue: ITA },
  AppSettingsService,
  // 不需要全局配置的话可以不加下面这行
  { provide: MatDialogRef, useValue: {} }
]

3. 清理无效配置：你当前providers数组里的HomeComponent是组件，不需要注册到providers中，直接删掉这一行即可，避免后续出现注入异常。
4. 可选兼容配置：如果后续打包或者运行时还报Dialog相关的找不到组件的错误，可以在@NgModule配置中新增entryComponents字段，把你所有自定义的弹窗组件都加进去：

@NgModule({
  // 原有的declarations、imports等配置保留
  entryComponents: [ConfirmDialogComponent, QrCodeDialogComponent, FilterPopupComponent]
})

修复完成后重启开发服务即可生效。

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