Angular v11升级v12报Resolving to directories is not possible with the exports field错误

API 探路者

2026-10-1

报错根因

Angular 12 默认将底层构建工具升级为Webpack 5，该版本对npm包package.json中的exports字段启用了严格校验规则，不允许直接导入未在exports字段中声明的目录路径，你遇到的request was ./就是项目中存在指向第三方包根目录的导入语句，未指定具体文件路径，不符合Webpack 5的校验规则。Angular 11使用的Webpack 4无该校验逻辑，因此升级后未改配置也会触发报错。

排查解决步骤

第一步定位触发报错的导入语句
执行ng build --verbose命令，查看完整报错栈的上游调用记录，找到类似import xxx from '包名'或者import xxx from '包名/'的根目录导入写法。
第二步修复导入路径
将根目录导入修改为明确指向具体入口文件的写法，例如把import { tool } from 'demo-package'修改为import { tool } from 'demo-package/esm/index.js'，如果是第三方包可以优先升级到适配Webpack 5的最新版本，一般官方会修复exports字段配置问题。
自定义npm包的修复方案
如果是自己开发的私有npm包触发的报错，直接在包的package.json中补充exports字段的根目录映射即可：
```
{
  "exports": {
    ".": "./index.js"
  }
}
```
临时兼容方案（仅做紧急验证使用）
不需要修改业务代码的临时兼容方式，在angular.json对应项目的构建配置中关闭校验即可：
```
"projects": {
  "你的项目名": {
    "architect": {
      "build": {
        "options": {
          "resolve": {
            "exportsFields": []
          }
        }
      }
    }
  }
}
```
验证问题解决后还是建议优先修复导入写法，避免后续升级出现其他兼容问题。