如何提供Nebular的NbDateService？自定义日历组件报NullInjectorError

解决方案 #

问题根本原因 #

NbDateService 是 Nebular 提供的抽象日期服务类，框架本身没有提供默认的全局实现，需要你手动绑定到对应日期库的适配实现上，仅引入 NbCalendarKitModule 无法自动注册该服务的提供者。

修复步骤 #

1. 先根据你项目使用的日期处理库，导入对应的 Nebular 日期适配模块：
   • 使用原生 JS Date 对象：导入 NbNativeDateModule
   • 使用 Moment.js：导入 NbMomentDateModule
   • 使用 Date-fns：导入 NbDateFnsDateModule
2. 在你声明自定义日历组件的模块（AppModule 或对应特性模块）的 providers 数组中，添加如下提供者绑定配置：

import { NgModule } from '@angular/core';
import { NbCalendarKitModule, NbDateService, NbNativeDateService } from '@nebular/theme';
// 如果用moment就替换导入为 import { NbMomentDateService } from '@nebular/moment';
// 如果用date-fns就替换导入为 import { NbDateFnsDateService } from '@nebular/date-fns';

@NgModule({
  imports: [
    NbCalendarKitModule,
    NbNativeDateModule, // 替换为你选的对应适配模块
    // 其他项目依赖模块
  ],
  declarations: [
    // 你的自定义日历Cell组件
  ],
  providers: [
    // 核心绑定：将抽象的NbDateService指向具体的适配实现
    { provide: NbDateService, useExisting: NbNativeDateService }
    // 用moment的话改为 useExisting: NbMomentDateService
    // 用date-fns的话改为 useExisting: NbDateFnsDateService
  ]
})
export class AppModule { }

独立组件适配（Angular 14+） #

如果你使用的是独立组件模式，直接在自定义 Cell 组件的 @Component 装饰器的 providers 数组中添加上述提供者配置即可，不需要在模块中注册。

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