Angular Material Dialog使用Angular元素报编译错误排查

两个编译错误的核心原因是弹出层组件DialogContentExampleDialog未在根模块的声明列表中注册，Angular编译该组件模板时，无法获取到MatDialogModule提供的对话框指令、FormsModule提供的ngModel双向绑定能力。
当前app.module.ts的declarations数组仅注册了DialogContentExample组件，和它写在同一TS文件中的DialogContentExampleDialog没有加入声明列表，因此该组件模板不在根模块的编译上下文中，无法复用根模块已经导入的Material、表单相关能力——这也是为什么主页面、外层组件里的同类特性可以正常运行，只有对话框内部的模板报未知元素、未知属性错误。
反复重装依赖、更换运行环境无法解决该问题，因为问题和依赖完整性、环境兼容性无关。

• 第一步：修改app.module.ts，在declarations数组中补充注册DialogContentExampleDialog，修正后的@NgModule声明部分代码如下：

@NgModule({
  declarations: [
    AppComponent,
    DialogContentExample,
    DialogContentExampleDialog // 补充注册对话框组件
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    MatDialogModule
  ],
  // 其余配置可保持原样
  providers: [],
  bootstrap: [AppComponent]
})

• 第二步（可选建议）：删除package.json依赖项中多余的@material/dialog包，这个包属于原生Material Web组件库，和Angular Material生态无关，保留容易造成依赖混淆，删除后重新执行npm install即可。
• 第三步：清理Angular编译缓存，删除项目根目录下的.angular缓存文件夹后重新执行ng serve启动项目，避免旧编译结果干扰。

• 组件TS文件顶部的import { FormsModule } from '@angular/forms'、import { MatDialogModule } from '@angular/material/dialog'仅为TypeScript层面的类型导入，和Angular模板编译的模块上下文无关，普通组件文件中不需要导入这类NgModule。
• 根模块AppModule的exports数组不需要重复导出BrowserModule、FormsModule、MatDialogModule这类模块，exports配置仅对被当前模块导入的其他子模块生效，根模块的exports配置不会影响自身声明组件的编译运行。

内容的提问来源于stack exchange，提问作者Ben O'Leary