Angular无法解析自定义NPM包的模块路径问题求助

问题背景 #

使用NPM 8.19.3开发Angular 13自定义库poc-scan-package，依赖Dynamsoft WebTwain v18.1.0管理扫描仪，通过npm link将构建后的dist目录链接给同工作区的Angular应用poc-scan-showcase使用时，构建应用出现两个错误：

./dist/poc-scan-package/fesm2015/poc-scan-package.mjs:3:0-28 - Error: Module not found: Error: Can't resolve 'dwt' in '/home/<username>/repos/test/poc/EmbedScanIntoPackage/dist/poc-scan-package/fesm2015'

Error: dist/poc-scan-package/lib/poc-scan-package.component.d.ts:2:26 - error TS2307: Cannot find module 'dwt/dist/types/WebTwain' or its corresponding type declarations.

`import { WebTwain } from "dwt/dist/types/WebTwain";`
                           ~~~~~~~~~~~~~~~~~~~~~~~~~

核心原因 #

1. Angular库构建时默认不会将第三方依赖（如dwt）打包进dist产物，导致link后的库在应用中找不到依赖
2. 类型声明的导入路径不符合包的默认类型映射规则，构建后无法正确关联类型文件

解决方案 #

1. 调整库的package.json依赖配置 #

在poc-scan-package/package.json中：

• 将dwt设为peerDependencies（确保最终应用自行安装依赖，避免重复打包），同时在devDependencies中保留用于开发构建：

"peerDependencies": {
  "dwt": "^18.1.0"
},
"devDependencies": {
  "dwt": "^18.1.0"
}

• 添加types字段明确类型入口：

"types": "./lib/poc-scan-package.component.d.ts"

2. 修正类型导入路径 #

将组件中的导入语句从：

import { WebTwain } from "dwt/dist/types/WebTwain";

改为：

import { WebTwain } from "dwt";

dwt包本身已在其package.json中声明了类型入口，直接导入根路径即可自动关联类型。

3. 配置Angular库构建允许CommonJS依赖 #

在angular.json的poc-scan-package项目构建配置中，添加allowedCommonJsDependencies：

"architect": {
  "build": {
    "options": {
      "allowedCommonJsDependencies": ["dwt"],
      // 其他原有配置...
    }
  }
}

4. 重新构建并更新npm link #

• 重新构建库：

npm run build poc-scan-package

• 重置全局链接（避免缓存问题）：

cd dist/poc-scan-package
npm unlink -g
npm link

• 在应用项目中重新关联链接：

cd ../../poc-scan-showcase
npm link poc-scan-package

5. 为应用安装dwt依赖 #

在poc-scan-showcase项目中执行：

npm install dwt@18.1.0

验证 #

重新构建应用：npm run build poc-scan-showcase，启动应用检查扫描仪功能是否正常运行。

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