使用MdTooltipModule时AppModule导入undefined错误排查求助

这个错误我之前也碰到过，大概率是导入路径不对、Angular和Material版本不兼容，或者依赖没装全导致的，给你一步步排查的方案：

1. 先修正模块导入的写法（最常见原因） #

从Angular Material 6.x版本开始，官方就把组件前缀从Md改成了Mat，而且每个组件都需要从对应的子模块导入，不再支持从@angular/material整体导入单个组件模块。你现在的导入写法是旧版的，会导致模块加载失败变成undefined。

把你的导入代码改成这样：

// 替换原来的MdTooltipModule导入
import { MatTooltipModule } from '@angular/material/tooltip';

然后在AppModule的imports数组里用MatTooltipModule替换原来的MdTooltipModule：

@NgModule({
  declarations: [ AppComponent ],
  imports: [ BrowserModule, FormsModule, MatTooltipModule ],
  // 其他配置...
})
export class AppModule { }

2. 检查Angular和Material的版本兼容性 #

如果上面改了还是报错，那要确认你的Angular核心版本和Angular Material版本是否匹配。比如Angular 15必须搭配Angular Material 15，版本不匹配会导致模块无法正确加载。

运行下面的命令查看版本：

npm list @angular/core @angular/material

如果版本不一致，要么升级要么降级到对应版本，比如要安装和Angular核心同版本的Material：

npm install @angular/material@<你的Angular版本号> @angular/cdk@<你的Angular版本号>

3. 确保安装了所有必要依赖 #

Angular Material依赖@angular/cdk和@angular/animations，如果没装的话也会导致模块加载异常。运行下面的命令补全依赖：

npm install @angular/material @angular/cdk @angular/animations

4. 别忘了添加Material主题样式 #

虽然这不会直接导致这个错误，但为了tooltip能正常显示，需要在angular.json的styles数组里添加Material的预构建主题：

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.css"
]

按照上面的步骤走，应该就能解决这个undefined导入的问题了。

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