在Angular库中使用ngx-bootstrap datepicker遇BsDaterangepickerConfig缺失问题

问题原因 #

你遇到的错误是因为BsDaterangepickerConfig属于日期范围选择器（daterangepicker）子模块，而非基础的datepicker模块，同时代码中多余的类型声明也干扰了类型解析。

解决方案 #

按以下步骤修改代码：

1. 删除多余的类型声明
   删掉ng-filter.module.ts中这段不必要的代码：

   declare module BsDatepickerModule {
     interface ModuleWithProviders<T = any> {
       ngModule: Type<T>;
       providers?: Provider[];
     }
   }
   

   ngx-bootstrap已正确导出ModuleWithProviders类型，无需自行声明。

2. 导入正确的模块和配置类
   将导入路径改为ngx-bootstrap/daterangepicker，同时使用forRoot()初始化模块：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { FormsModule } from '@angular/forms';
   // 从daterangepicker子模块导入正确的模块和配置类
   import { BsDaterangepickerModule, BsDaterangepickerConfig } from 'ngx-bootstrap/daterangepicker';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { NgFilterComponent } from './ng-filter.component';
   
   @NgModule({
     declarations: [NgFilterComponent],
     imports: [
       CommonModule,
       FormsModule,
       // 使用forRoot()初始化daterangepicker模块（库模块中推荐此方式）
       BsDaterangepickerModule.forRoot(),
       BrowserAnimationsModule
     ],
     exports: [NgFilterComponent],
     // 若需全局配置日期范围选择器，可在此添加配置类；也可在组件中注入使用
     providers: [BsDaterangepickerConfig]
   })
   export class NgFilterModule { }
   

3. 在组件中使用BsDaterangepickerConfig
   如果需要在组件中自定义配置，直接注入即可：

   import { Component } from '@angular/core';
   import { BsDaterangepickerConfig } from 'ngx-bootstrap/daterangepicker';
   
   @Component({
     selector: 'app-ng-filter',
     templateUrl: './ng-filter.component.html'
   })
   export class NgFilterComponent {
     constructor(private bsRangeConfig: BsDaterangepickerConfig) {
       // 示例配置：自定义日期格式、隐藏周数
       this.bsRangeConfig.dateInputFormat = 'YYYY-MM-DD';
       this.bsRangeConfig.showWeekNumbers = false;
     }
   }
   

版本兼容性说明 #

你的package.json中ngx-bootstrap@6.2.0与Angular 10版本匹配，无需调整依赖版本。

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