如何在Angular库中正确声明可选依赖libphonenumber-js？

你当前的配置没解决问题的核心在于：Angular的构建工具（Webpack）会解析库中所有模块的静态导入语句，不管父项目是否导入对应模块。只要你的库代码里有import 'libphonenumber-js'这种静态导入，Webpack就会把它视为必须依赖，不会因为peer依赖标记为可选就跳过解析。

1. 改用动态导入依赖 #

修改使用libphonenumber-js的组件代码，把静态导入换成动态导入，只有当组件被实际使用时才会加载依赖：

// 删掉原来的静态导入
// import { parsePhoneNumber } from 'libphonenumber-js';

// 改成动态导入的方式
async function handlePhoneParse(phone: string) {
  const { parsePhoneNumber } = await import('libphonenumber-js');
  return parsePhoneNumber(phone);
}

这样父项目不导入该模块时，不会触发依赖解析，自然不会报错。

2. 拆分独立模块（可选） #

如果这个依赖libphonenumber-js的模块和库中其他模块耦合度很低，直接把它拆成单独的子包（比如@your-lib/phone-component）。父项目只有在需要用这个子包时才需要安装对应依赖，主包完全不需要包含该依赖声明。

3. 调整依赖声明位置 #

把libphonenumber-js从peerDependencies移到devDependencies（用于库自身开发构建），同时在optionalDependencies中声明：

"devDependencies": {
  "libphonenumber-js": ">=1.10.9",
  // 其他开发依赖...
},
"optionalDependencies": {
  "libphonenumber-js": ">=1.10.9"
}

注意：这个方法必须配合动态导入使用，否则静态导入依然会导致构建报错。

• 移除父项目package.json里的libphonenumber-js依赖
• 构建父项目，确认不再出现Can't resolve 'libphonenumber-js'错误
• 测试导入使用该模块的场景，确认依赖能正常加载运行

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