@ng-bootstrap/ng-bootstrap 是独立 Angular 组件库，不依赖 jQuery，仅复用 Bootstrap CSS；需手动引入 CSS、按 NgModule 或 Standalone 方式注册服务，严禁混用原生 Bootstrap JS。
@ng-bootstrap/ng-bootstrap不是 Bootstrap 的“集成插件”，它是个独立的 Angular 组件库，只复用 Bootstrap 的 CSS 类名和 DOM 结构规范，不依赖 jQuery、不加载 Bootstrap JS。真正在 Angular 里“用上”它，关键不是“怎么集成”，而是**避免混用、分清职责、按 Angular 方式注册服务**。
为什么 ng add @ng-bootstrap/ng-bootstrap 总失败？
这不是命令本身坏了，而是它对 Angular 运行时环境有隐式要求：
-
@angular/localize必须已安装（哪怕你不用多语言）：运行ng add @angular/localize -
@angular/forms版本必须严格匹配当前 Angular 主版本（如 Angular 17 →@angular/forms@^17.0.0），否则 schematics 解析失败 - Angular v17+ 默认启用 Standalone Components，而
ng add仍尝试生成 NgModule 代码，大概率卡住
建议跳过 ng add，直接 npm install @ng-bootstrap/ng-bootstrap，再手动配置。
样式没生效？90% 是 CSS 没正确引入
@ng-bootstrap/ng-bootstrap 完全不提供 CSS —— 它只生成带 .btn、.dropdown-menu 等 class 的 HTML。样式必须由你单独引入官方 Bootstrap CSS：
- 在
angular.json的"styles"数组里加一行："node_modules/bootstrap/dist/css/bootstrap.min.css" - 别用
bootstrap.bundle.min.js：它含 jQuery，会和 Angular 的事件机制冲突，且@ng-bootstrap根本不需要它 - 检查是否被其他框架覆盖：比如 Tailwind 的
@layer base或重置规则可能干掉.btn的display或padding
NgbModal 打不开，报 NullInjectorError: No provider for NgbModal？
这个错误不是组件写错了，是服务没注册进 DI 系统：
- NgModule 方式：只在根模块（
AppModule）的imports中写NgbModule.forRoot()；子模块或懒加载模块里只能写NgbModule（无.forRoot()） - Standalone 方式（Angular v14+ 推荐）：不能用
NgbModule，改用provideNgbModal()等函数，在bootstrapApplication()的providers里提供 -
NgbModal是服务，不是组件 —— 别把它当指令写在模板里；要用modalService.open(MyContentComponent)调用
下拉菜单点不开、Tooltip 不显示？先看 DOM 结构和依赖注入链
这类交互失效往往不是样式问题，而是组件没获得必要的上下文：
-
ngbDropdown必须包裹在ngbDropdown元素内，且ngbDropdownToggle和ngbDropdownMenu必须是其直系子元素，否则PositioningService找不到参照节点 -
ngbTooltip/ngbPopover需要NgBootstrapConfig提供默认配置，如果没显式传container，它会尝试 append 到document.body—— 若应用挂载在 Shadow DOM 或 iframe 内，就会静默失败 - 所有基于 Portal 的组件（Modal/Toast/Popover）都依赖
ApplicationRef和ComponentFactoryResolver（v16+ 改为EnvironmentInjector），Standalone 模式下漏掉provideNgbXxx()就必然白屏
最常被忽略的点：Angular 的构建优化（如 buildOptimizer 或 Ivy partial compilation）有时会让 ngb- 指令的装饰器元数据丢失，导致指令未被识别 —— 遇到诡异的“HTML 存在但无行为”，先试 ng build --aot=false 快速验证是否是编译层问题。
