Angular项目中ng add @ng-bootstrap/ng-bootstrap失败主因是缺失@angular/localize或@angular/forms版本不匹配；需先安装依赖、校验版本，再手动安装并导入模块；CSS须单独引入bootstrap.min.css；服务需通过forRoot()注册或Standalone方式提供；严禁混用原生Bootstrap JS。
Angular项目里直接用ng add @ng-bootstrap/ng-bootstrap会失败？
大多数 angular 项目（尤其是 v14+）执行这个命令会报错，不是因为包本身有问题，而是它默认依赖 @angular/localize 和特定版本的 @angular/forms。如果你没提前装好这些，或者用了较新的 angular 版本（比如 v17+），命令会卡在依赖解析阶段。
- 先确认已安装
@angular/localize：ng add @angular/localize（哪怕暂时不用 i18n，也得装） - 检查
@angular/forms是否为项目当前 Angular 主版本对应版本（如 Angular 17 → 必须用@angular/forms@^17.0.0） - 如果仍失败，跳过 schematics，手动安装：
npm install @ng-bootstrap/ng-bootstrap，再按文档手动导入NgBootstrapModule
为什么bootstrap.css引入后按钮没样式、下拉菜单点不开？
这是最常见的“看起来装了但不工作”问题：CSS 和 JS 功能是分开加载的。@ng-bootstrap 不提供 CSS，只提供基于 Bootstrap DOM 结构的 Angular 组件（如 NgbModal、NgbDropdown），而样式必须单独引入官方 Bootstrap CSS。
- 别用
bootstrap.bundle.min.js—— 它含 jQuery，Angular 项目里完全不需要，且和 @ng-bootstrap 冲突 - 在
angular.json的"styles"数组里加 Bootstrap CSS 路径："node_modules/bootstrap/dist/css/bootstrap.min.css" - 确保没同时引入其他 CSS 框架（如 Tailwind）的重置规则，它们可能覆盖
.btn、.dropdown-menu等基础类
NgbModal 打不开、报 NullInjectorError: No provider for NgbModal!？
这个错误说明模块没正确注册，不是组件写错了，而是依赖注入链断了。@ng-bootstrap 的服务（如 NgbModal、NgbToast）必须通过模块级 forRoot() 注册，否则无法被注入。
- 只在根模块（通常是
AppModule）的imports中写NgBootstrapModule.forRoot()，别在子模块或懒加载模块里重复调用 - 如果用了 Standalone Components（Angular v14+ 默认推荐方式），不能用
NgBootstrapModule，改用provideNgbModal()等函数，在bootstrapApplication()的 providers 数组里提供 - 检查是否误把
NgbModal当作组件直接写在模板里（它不是组件，是服务，要用modalService.open()调用）
用 ngbTooltip 或 ngbPopover 时内容不显示、位置偏移？
这类浮层组件高度依赖 DOM 渲染时机和定位库（Popper.js）。@ng-bootstrap 内部封装了 Popper，但若页面结构复杂（比如 tooltip 在 position: fixed 容器内、或父元素有 transform），Popper 可能算错参照坐标。
- 优先用
container="body"属性（如<button ngbtooltip="..." container="body"></button>），避免被局部 CSS 截断或遮挡 - 不要给 tooltip 触发元素设
overflow: hidden或clip-path，这会导致浮层被裁剪 - 如果内容是异步加载（比如从 API 取 tooltip 文字），确保绑定的是稳定值，别用未初始化的
undefined或空对象触发首次渲染
最常被忽略的是：@ng-bootstrap 和原生 Bootstrap JS 完全互斥。只要项目里还留着 bootstrap.bundle.min.js 或任何 new bootstrap.*() 调用，就一定会出现 modal 关不掉、dropdown 二次点击失效等问题——删干净，一个都不能留。
