主项目向独立控件库提供ng-bootstrap依赖的方案及最佳实践

核心结论 #

可以由主项目向控件库提供ng-bootstrap依赖，这是业内通用的最佳实践，你认为两边分别安装ng-bootstrap不妥当的判断是正确的，重复安装会导致打包体积冗余、版本不一致引发的运行时冲突、依赖注入实例重复等问题。 #

具体实现方案 #

步骤1：控件库侧配置依赖类型 #

将控件库package.json中的@ng-bootstrap/ng-bootstrap、对应要求的Bootstrap版本、Angular核心依赖从dependencies节点移动到peerDependencies节点，示例配置如下：

{
  "name": "你的自定义控件库名",
  "version": "1.0.0",
  "peerDependencies": {
    "@angular/common": "^16.0.0",
    "@angular/core": "^16.0.0",
    "@ng-bootstrap/ng-bootstrap": "^15.0.0",
    "bootstrap": "^5.2.3"
  }
}

该配置的作用是告诉包管理器，控件库运行需要宿主环境提供符合版本要求的上述依赖，不会把这些依赖打包到控件库的产物中。

步骤2：调整打包配置（非必填） #

如果你使用Angular CLI创建的标准Library项目，默认会自动排除peerDependencies的打包，无需额外修改。
如果使用自定义构建工具（如Rollup），需要在配置中将上述依赖标记为external，避免打包进最终产物。

步骤3：主项目侧配置 #

主项目正常安装符合控件库版本要求的@ng-bootstrap/ng-bootstrap和bootstrap，按原有逻辑导入NgbModule完成初始化即可，控件库调用ng-bootstrap的能力时会直接复用主项目安装的依赖实例。 #

额外注意事项 #

• 控件库的peerDependencies要明确标注支持的版本范围，尽量和你验证过的版本对齐，避免主项目安装不兼容版本引发异常
• 后续其他项目复用该控件库时，只需确保这些项目本身已经安装符合要求的ng-bootstrap依赖即可，无需额外重复安装

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