Angular 14中导入HttpClientModule提示找不到模块如何解决？

从你提供的环境信息和代码来看，HttpClientModule导入报错的核心原因是TypeScript模块解析失败，常见诱因有三类：

• 依赖安装异常：@angular/common/http是@angular/common包下的独立二级入口，npm安装过程中缓存损坏、文件写入不全时，会出现同包根入口（如你可正常导入的APP_BASE_HREF）可访问、二级入口无法识别的情况
• TS服务缓存失效：VSCode内置的TypeScript语言服务未正确加载node_modules中的类型定义，出现假报错
• 代码/配置错误：包括导入路径写错、导入语句被注释、tsconfig模块解析规则不符合Angular14要求等

按顺序执行以下操作，每完成一步可验证问题是否解决：

• 清理缓存并重装依赖
  先关闭所有VSCode窗口，在项目根目录执行命令清理环境：

  # 强制清空npm缓存
  npm cache clean --force
  

  手动删除项目根目录下的node_modules文件夹和package-lock.json文件，再执行依赖安装：

  npm install
  

• 校验包文件完整性
  安装完成后打开node_modules/@angular/common目录，确认存在http子文件夹，且文件夹内包含index.d.ts、http.module.d.ts等类型文件。如果该文件夹缺失，执行命令补装对应版本的包：

  npm install @angular/common@14.0.2 --save-exact
  

• 检查TypeScript配置
  打开项目根目录的tsconfig.json，确认compilerOptions下的moduleResolution字段值为node，不要手动添加针对@angular/*包的自定义paths映射规则，避免干扰默认模块解析逻辑。正确配置片段参考：

  {
    "compilerOptions": {
      "moduleResolution": "node",
      // 其余原有配置保持不变
    }
  }
  

• 重启TS服务
  重新用VSCode打开项目，按Ctrl+Shift+P（Windows系统）调出命令面板，搜索并执行Restart TS Server，等待语言服务重启完成后再检查报错。
• 校验导入代码
  打开app.module.ts，确认HttpClientModule的导入语句未被注释、路径和拼写完全正确：

  // 注意路径后缀为/http，不要漏写，语句不要加注释
  import { HttpClientModule } from '@angular/common/http';
  

  导入语句必须处于生效状态，才能在@NgModule的imports数组中正常引用HttpClientModule。

完成以上操作后执行ng serve启动项目，若启动过程中无Cannot find HttpClientModule相关报错，说明问题已修复。

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