Angular日历组件加载报错：NullInjectorError: No Provider for BsDropdownDirective

核心原因 #

这个错误说明你的Angular模块中未为BsDropdownDirective（通常来自ng-bootstrap库）提供对应模块支持，大概率是漏导入所需模块，也可能是Angular与ng-bootstrap版本不兼容导致。

分步解决 #

1. 确保导入NgbDropdown模块

打开你的calendar.module.ts，导入NgbDropdownModule并添加到imports数组中：

import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    // 保留你已有的其他模块，比如CommonModule、ReactiveFormsModule等
    NgbDropdownModule
  ],
  declarations: [CalendarComponent]
})
export class CalendarModule { }

• 若组件属于懒加载模块，必须单独导入该模块；若已在根AppModule全局导入，子模块可省略，但懒加载模块建议显式导入以避免依赖问题。

2. 校验Angular与ng-bootstrap版本兼容性

不同版本的ng-bootstrap对Angular版本有严格要求，常见对应关系：

• ng-bootstrap 16.x ↔ Angular 16
• ng-bootstrap 15.x ↔ Angular 15
• ng-bootstrap 14.x ↔ Angular 14
• 更低版本以此类推

检查package.json中的@angular/core和@ng-bootstrap/ng-bootstrap版本，若不匹配，执行对应升级/降级命令：
比如升级ng-bootstrap适配当前Angular版本：

npm install @ng-bootstrap/ng-bootstrap@适配版本号 --save

或降级Angular（若更适合你的项目）：

ng update @angular/core@目标版本 @angular/cli@目标版本

3. 检查模板中指令的正确使用

确认calendar.component.html中下拉组件的指令拼写正确，新版本ng-bootstrap使用ngb前缀（旧版本可能用bs前缀，若你用的是旧版库则对应调整），示例：

<div ngbDropdown class="d-inline-block">
  <button class="btn" id="eventDropdown" ngbDropdownToggle>更多操作</button>
  <div ngbDropdownMenu aria-labelledby="eventDropdown">
    <button ngbDropdownItem>编辑事件</button>
    <button ngbDropdownItem>删除事件</button>
  </div>
</div>

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