Angular项目编译时MatTooltipModule非NgModule错误及自动恢复问题

我之前也碰到过这种诡异的情况！首次执行ng serve时弹出这个错误，但随便改个空格重新保存触发热重载就正常了——这说明你的代码逻辑本身没问题，大概率是编译缓存、模块解析时机或者版本兼容的锅。下面给你几个亲测有效的排查和解决方法：

1. 彻底清理Angular CLI缓存 #

Angular CLI会缓存编译产物，旧缓存文件很可能导致模块解析异常。直接执行命令清空所有缓存：

ng cache clean --all

另外手动删掉项目根目录下的node_modules/.cache文件夹（如果存在），然后重新启动ng serve试试。

2. 确认模块导入的正确性 #

虽然你说排除了导入问题，但还是再确认下：MatTooltipModule必须从正确的路径导入，别搞错了：

// 正确的导入方式
import { MatTooltipModule } from '@angular/material/tooltip';

同时在你的NgModule的imports数组里，确保它在BrowserAnimationsModule之后导入——毕竟Material组件依赖动画模块，顺序不对也可能影响首次解析。

3. 对齐Angular与Material的版本 #

版本不兼容是这类奇怪问题的常见诱因。Angular核心包和Angular Material的版本必须完全匹配（比如Angular 14.x对应Material 14.x）。先执行命令查看当前版本：

ng version

如果版本不匹配，就用ng update命令同步版本（以升级到14.x为例）：

ng update @angular/core@14 @angular/cli@14 @angular/material@14

4. 关闭增量编译 #

增量编译的优化机制有时候会干扰首次编译的模块解析。你可以在angular.json里把它关掉：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "options": {
            "incremental": false
          }
        }
      }
    }
  }
}

修改后重启ng serve看看效果。

5. 检查TypeScript配置 #

确保tsconfig.json里的moduleResolution设置为node，这是Angular项目的标准配置，避免模块解析路径出错：

{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}

这种问题确实挺磨人的，但按照上面的步骤逐一排查，基本都能解决。

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