I am facing angular error at browser console. This error is related to injection of services. Even though I provided the

'Injector'

before class declaration. Below is the arrnagement of my NgModule class.

import {
  NgxMatDatetimePickerModule, 
  NgxMatNativeDateModule, 
  NgxMatTimepickerModule 
} from '@angular-material-components/datetime-picker';


@NgModule({
  declarations: [
    AppComponent,
    SalesUnitOverviewComponent,
    SalesBookingDetailsComponent,
    NgbdDatepickerRange,
  ],

  // entryComponents: [SalesBookingDetailsComponent],
  
  imports: [
    NgxMatDatetimePickerModule,
    MatTabsModule,
    NgxMatTimepickerModule,
    NgxMatNativeDateModule,
    BrowserModule,
    MatDialogModule,    
    MatFormFieldModule,
    MatDatepickerModule,
    MatToolbarModule,
    BrowserAnimationsModule,
    FormsModule,
    MatInputModule,
    MatDividerModule,
    MatSelectModule,
    ReactiveFormsModule,
    HttpClientModule,
    MatProgressSpinnerModule,
    NgbModule,  
    BrowserAnimationsModule,
    AppRoutingModule,
    MatCheckboxModule,
    MatButtonModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatCardModule   
  ],
  providers:
    [
      SalesUnitOverviewService, PaginationService,
      SalesUnitOverviewComponent, SalesBookingDetailsComponent, HttpClient, HttpClientModule,
      { provide: MAT_DIALOG_DATA, useValue: {} },
      { provide: MatDialogRef, useValue: {} }
    ],

  bootstrap: [AppComponent]
})
export class AppModule { }

Can anybody let me know how can I get rid of this error. Please see the screenshot I am attaching for the reference.

I googled and there were not much of the material available related to exactly the error I am facing!!