Стили сетки ag не работают после установки

это моя панель инструментов.component.html

<ag-grid-angular style = "width: 100%; height: 500px;" class = "ag-theme-balham" [rowData] = "rowData"
        [columnDefs] = "columnDefs">
    </ag-grid-angular>

это моя панель инструментов.component.ts

columnDefs = [
    { field: 'Date', sortable: true, filter: true },
    { field: 'Time Elapsed', sortable: true, filter: true },
    { field: 'UOID', sortable: true, filter: true },
    { field: 'Claim', sortable: true, filter: true },
    { field: 'Cust Name', sortable: true, filter: true },
    { field: 'Cust Mobile', sortable: true, filter: true },
    { field: 'City', sortable: true, filter: true },
    { field: 'Service', sortable: true, filter: true },
    { field: 'Amount', sortable: true, filter: true },
    { field: 'Online Received', sortable: true, filter: true },
    { field: 'Pay Mode', sortable: true, filter: true },
    { field: 'Pay Status', sortable: true, filter: true },
    { field: 'Order Status', sortable: true, filter: true },
    { field: 'Pilot', sortable: true, filter: true },
    { field: 'Action', sortable: true, filter: true }
];
rowData = [];

это моя панель инструментов.module.ts

import { AgGridModule } from 'ag-grid-angular';
@NgModule({
providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
],
imports: [
    CommonModule, 
    NgbCarouselModule, 
    NgbAlertModule, 
    DashboardRoutingModule, 
    StatModule, 
    AgGridModule.withComponents([])
],
declarations: [
    DashboardComponent, 
    TimelineComponent, 
    NotificationComponent, 
    ChatComponent
] }) export class DashboardModule {}

это моя панель инструментов.component.scss

@import  "~ag-grid-community/dist/styles/ag-grid.css";
@import  "~ag-grid-community/dist/styles/ag-theme-balham.css";

на выходе то, что я получаю

Я использую панель управления SB admin bs4. я не знаю, почему эта проблема не решается