Angular执行ng serve时提示@azure/msal-angular模块未找到的解决方法

以下是几个实用的排查和解决步骤：

• 清理依赖缓存并重新安装
  先删除本地依赖文件和锁文件，再重新安装：

  # Windows系统
  rd /s /q node_modules
  del package-lock.json yarn.lock
  
  # macOS/Linux系统
  rm -rf node_modules package-lock.json yarn.lock
  

  然后执行安装命令：

  npm install
  # 或使用yarn
  yarn install
  

  同时清除Angular的构建缓存：

  ng cache clean --all
  

• 核对导入路径与包版本匹配
  不同版本的@azure/msal-angular导出路径可能不同：

  • 若使用v2及以上版本，正确的导入方式应为：

    import { MsalInterceptor } from '@azure/msal-angular';
    

  • 手动查看node_modules/@azure/msal-angular目录下的文件结构，确认MsalInterceptor的实际导出位置，调整导入路径至正确位置。

• 检查TypeScript配置
  打开项目根目录的tsconfig.json：

  • 确认compilerOptions.baseUrl设置为"./"，确保路径解析基准正确
  • 检查compilerOptions.paths中是否存在对@azure/msal-angular的错误映射，若有则删除或修正

• 重启开发环境
  完全关闭VSCode，终止正在运行的ng serve进程，然后重新打开项目并启动开发服务器，清除编辑器和编译服务的缓存。

• 验证依赖安装状态
  运行以下命令查看@azure/msal-angular的实际安装情况：

  npm list @azure/msal-angular
  

  确保package.json中该依赖位于dependencies而非devDependencies，且版本与实际安装一致。

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