Angular自定义npm包导入提示Cannot find module问题问询

1. 检查npm包本身的package.json配置 #

• 确认main字段配置正确：该字段指向包编译后的入口文件路径，常用配置为"main": "./dist/index.js"，路径书写错误会直接导致模块找不到
• 确认types/typings字段配置正确：如果是TS开发的包，必须声明类型入口，比如"types": "./dist/index.d.ts"，缺少该字段就会触发「找不到对应类型声明」的报错
• 确认files字段包含所有需要发布的编译产物：如果配置了files字段过滤发布内容，必须把dist目录等产物路径加入配置，否则发布时会过滤掉核心运行文件，导致安装后的包没有可用代码

可以本地打包后先执行npm pack生成tgz压缩包，解压后检查内部文件是否完整，确认dist目录、类型声明文件都被包含在内

2. 核对导入语句拼写 #

• 导入时写的模块名必须和你npm包package.json里的name字段完全一致，大小写也要严格对应，绝大多数报错都是拼写错误、大小写不匹配导致的

// 错误示例：包名为my-custom-ui，导入时多写了后缀
import { Button } from 'my-custom-ui-lib'
// 正确示例：和包名完全对应
import { Button } from 'my-custom-ui'

3. 检查本地项目的TS配置 #

• 确认tsconfig.json里的moduleResolution配置和你包的模块化规范匹配，如果你的包是ESModule规范，建议配置为"moduleResolution": "node16"或者"bundler"
• 如果你的包暂时没有提供类型声明，可以临时在项目src目录下新建declarations.d.ts文件，添加如下内容解决报错：

declare module 'my-module-name' {
  // 按需补充类型定义即可，无特殊要求直接写any也可以临时解决问题
  export const anyMethod: (...args: any[]) => any
}

4. 本地验证包可用性 #

上述配置都确认无误后，可以先不用发布到npm，本地链路测试验证：

• 先在你的npm包根目录执行npm link
• 再在业务项目根目录执行npm link <my-package-name>
• 测试导入是否正常，没有问题再重新打包发布新版本
• 发布后建议执行npm install <my-package-name>@latest强制安装最新版本，避免npm缓存拉取旧版本导致问题

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