Angular从17升级到19后ng build动态导入失效问题

问题描述 #

将Angular从17升级到19后，执行ng build时动态导入功能失效。原导入语句：

import('@fingerprintjs/fingerprintjs/dist/fp.esm.js')

出现错误：

TypeError: Failed to resolve module specifier '@fingerprintjs/fingerprintjs/dist/fp.esm.js'

在Angular 17中，该文件会被打包为fp.esm-Q72BNRQR.js，动态导入会自动重写为：

import("./fp.esm-Q72BNRQR.js")

解决方案 #

• 改用包的标准入口导入
  直接导入包的主入口，而非深层dist文件，让构建工具自动处理正确的ESM路径：

  import('@fingerprintjs/fingerprintjs')
  

  多数npm包的package.json已配置好正确的入口指向，这样能避免手动指定文件路径带来的解析问题。

• 检查package.json的exports字段
  查看@fingerprintjs/fingerprintjs的package.json中exports字段，确认是否导出了dist/fp.esm.js路径。如果没有，需调整导入路径为exports中定义的合法路径，例如：

  import('@fingerprintjs/fingerprintjs/esm') // 示例，以实际exports配置为准
  

• 调整Angular构建配置
  打开angular.json，检查build配置下的outputHashing选项，确保设置为all或bundles，这样构建工具会正确生成带哈希的文件名并更新动态导入路径：

  "build": {
    "options": {
      "outputHashing": "all"
    }
  }
  

• 清理构建缓存
  执行以下命令清理Angular缓存，避免旧缓存干扰新构建：

  ng cache clean
  

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