Angular 17未导入MatFormField却报‘需含MatFormFieldControl’错误求助

排查方向及解决方案 #

• 检查全局/引用组件的模板：当前页面未使用MatFormField，但可能页面引用的全局组件（如导航、页脚）或共享组件中存在空的<mat-form-field>标签，或是该组件依赖了包含MatFormField的子组件。全局搜索项目中所有<mat-form-field>标签，确认是否有遗漏的未绑定表单控件的实例。
• 排查模块的传递导入：确认你列出的Material模块是否间接引入了MatFormFieldModule，或者是否有其他共享模块导入了MatFormFieldModule并被当前页面所在模块引用。虽然你列出的MatIconModule、MatDialogModule等本身不依赖MatFormField，但传递导入仍可能导致组件被加载。
• 利用Source Map定位源码：浏览器开发者工具的Sources面板中，通过打包后的JS文件对应的Source Map，定位到堆栈跟踪中MatFormField.ngAfterContentChecked触发的具体组件，直接找到问题源头。
• 清理项目缓存：执行ng clean命令清理Angular缓存，再重新构建项目，排除旧代码残留导致的异常。

项目环境信息 #

当前导入的Material模块：

MatIconModule,
MatDialogModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatDialogModule,
MatTabsModule,
MatMenuModule

错误堆栈：

Stack: Error: mat-form-field must contain a MatFormFieldControl.
    at getMatFormFieldMissingControlError (/main.c8813ac251e233ee557e.js:110505:12)
    at MatFormField._validateControlChild (/main.c8813ac251e233ee557e.js:111016:19)
    at MatFormField.ngAfterContentChecked (/main.c8813ac251e233ee557e.js:110839:14)
    at callProviderLifecycles /main.c8813ac251e233ee557e.js:87448:18)
    at callElementProvidersLifecycles (/main.c8813ac251e233ee557e.js:87417:13)
    at callLifecycleHooksChildrenFirst (/main.c8813ac251e233ee557e.js:87399:29)
    at checkAndUpdateView (/main.c8813ac251e233ee557e.js:88619:5)
    at callViewAction (/main.c8813ac251e233ee557e.js:88980:21)
    at execEmbeddedViewsAction (/main.c8813ac251e233ee557e.js:88937:17)
    at checkAndUpdateView (/main.c8813ac251e233ee557e.js:88615:5)

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