Angular 11升级至Angular 12后出现TS2307错误无法识别本地导入模块

问题根因 #

该问题和Angular 12的特性变更直接相关，Angular 12版本针对TypeScript编译做了两处核心默认配置调整：

• 编译配置默认拆分为多层级结构，根目录tsconfig.json为全局基础配置，新增tsconfig.app.json作为应用专属编译配置，优先级更高
• 默认开启forceConsistentCasingInFileNames规则，对路径、文件名的大小写匹配做严格校验

你手动升级时只沿用了根目录的tsconfig.json配置，没有适配上述两处变更，就会出现文件实际存在却报TS2307错误的问题。

解决方案 #

按以下步骤逐一排查即可解决：

• 确认导入路径的大小写和实际文件完全匹配
  例如实际文件名为order.ts，导入时写src/app/data/Order就会触发报错，修正导入路径的大小写和实际文件一致即可。
• 检查根目录tsconfig.app.json的include配置
  确保配置包含所有应用源码路径，正确示例如下：

  {
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "outDir": "./out-tsc/app",
      "types": []
    },
    "files": [
      "src/main.ts",
      "src/polyfills.ts"
    ],
    "include": [
      "src/**/*.d.ts",
      "src/**/*.ts"
    ]
  }
  

• 若保留原项目的src/xxx格式绝对路径导入，需在根目录tsconfig.json的compilerOptions中新增路径映射配置：

  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "src/*": ["src/*"]
    },
    // 其余原有配置保持不变
  }
  

• 配置修改完成后清空缓存重新构建，执行命令：

  rm -rf .angular node_modules/.cache
  ng serve
  

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