Ag-Grid: Angular's optimisations break styling

I'm using Ag-Grid 32.2.2 Enterprise

Angular CLI: 18.2.7
Node: 20.17.0
Package Manager: npm 10.8.2
OS: win32 x64


Running a Developer build without optimisations works as expected. There are no errors/warnings in Chrome's console.

When running a production build OR a configuration which has "optimization": true in angular.json causes Ag-Grid to fail applying styles:

In Chrome 129.0.6668.90 I see the following errors in the console:

AG Grid: no value for --ag-row-height. This usually means that the grid has been initialised before styles have been loaded. The default value of 42 will be used and updated when styles load.

AG Grid: no value for --ag-list-item-height. This usually means that the grid has been initialised before styles have been loaded. The default value of 24 will be used and updated when styles load

AG Grid: no value for --ag-list-item-height. This usually means that the grid has been initialised before styles have been loaded. The default value of 24 will be used and updated when styles load.


The call stack is not very meaningful for Angular's optimised code:

(anonymous) @ main.esm.mjs:162
Su @ main.esm.mjs:155
S @ main.esm.mjs:162
getSizeEl @ main.esm.mjs:36725
postConstruct @ main.esm.mjs:36632
(anonymous) @ main.esm.mjs:10496
initBeans @ main.esm.mjs:10496
init @ main.esm.mjs:10475
init @ main.esm.mjs:10546
UE @ main.esm.mjs:10452
qE @ main.esm.mjs:10542
create @ main.esm.mjs:44481
EC @ main.esm.mjs:44405
(anonymous) @ ag-grid-angular.component.ts:261
invoke @ zone.js:369
run @ zone.js:111
runOutsideAngular @ ng_zone.ts:276
_ngZone.isRunningWithinTestZone.runOutside @ angularFrameworkOverrides.ts:31
runOutsideAngular @ angularFrameworkOverrides.ts:70
ngAfterViewInit @ ag-grid-angular.component.ts:248
La @ hooks.ts:290
Bh @ hooks.ts:319
cc @ hooks.ts:270
Yn @ hooks.ts:205
Kg @ change_detection.ts:327
pi @ change_detection.ts:497
fl @ change_detection.ts:445
Xg @ change_detection.ts:433
hl @ change_detection.ts:514
Kg @ change_detection.ts:305
pi @ change_detection.ts:497
fl @ change_detection.ts:445
Xg @ change_detection.ts:433
hl @ change_detection.ts:514
Kg @ change_detection.ts:305
pi @ change_detection.ts:497
Qg @ change_detection.ts:116
ll @ change_detection.ts:95
uD @ application_ref.ts:923
synchronizeOnce @ application_ref.ts:667
synchronize @ application_ref.ts:629
_tick @ application_ref.ts:596
tick @ application_ref.ts:580
_loadComponent @ application_ref.ts:753
bootstrap @ application_ref.ts:558
(anonymous) @ bootstrap.ts:128
invoke @ zone.js:369
onInvoke @ ng_zone.ts:470
invoke @ zone.js:368
run @ zone.js:111
(anonymous) @ zone.js:2538
invokeTask @ zone.js:402
onInvokeTask @ ng_zone.ts:447
invokeTask @ zone.js:401
runTask @ zone.js:159
$ @ zone.js:581
Promise.then
H @ zone.js:557
U @ zone.js:568
scheduleTask @ zone.js:391
onScheduleTask @ zone.js:271
scheduleTask @ zone.js:382
scheduleTask @ zone.js:205
scheduleMicroTask @ zone.js:225
o @ zone.js:2528
then @ zone.js:2733
runInitializers @ application_init.ts:197
(anonymous) @ bootstrap.ts:114
aD @ application_ref.ts:184
(anonymous) @ bootstrap.ts:112
invoke @ zone.js:369
onInvoke @ ng_zone.ts:470
invoke @ zone.js:368
run @ zone.js:111
run @ ng_zone.ts:229
pD @ bootstrap.ts:59
K0 @ create_application.ts:65
Ng @ browser.ts:132
(anonymous) @ main.ts:5


.TS for the component displaying grid:

import "@ag-grid-community/styles/ag-grid.css";
import "@ag-grid-community/styles/ag-theme-quartz.css";

import { Component } from '@angular/core';

import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { SideBarModule } from "@ag-grid-enterprise/side-bar";

import { AgGridAngular } from '@ag-grid-community/angular'; // Angular Data Grid Component
import { ColDef,
GridReadyEvent,
DomLayoutType,
RowHeightParams,
SideBarDef} from "@ag-grid-community/core";
import { ModuleRegistry } from "@ag-grid-community/core";
import { LicenseManager } from "@ag-grid-enterprise/core";
import { FiltersToolPanelModule } from "@ag-grid-enterprise/filter-tool-panel";
import { SetFilterModule } from '@ag-grid-enterprise/set-filter'

import { CommonModule } from '@angular/common';
import { environment } from '../../../environments/environment';

ModuleRegistry.registerModules([ClientSideRowModelModule,
SideBarModule,
FiltersToolPanelModule,
SetFilterModule]);

LicenseManager.setLicenseKey(environment.agGridLicenseKey);


In the component class I provide

export class TopicListComponent {
themeClass = "ag-theme-quartz";

constructor(public auth: AuthService, private http: HttpClient) { }

onGridReady(params: GridReadyEvent) {
<logic here>
}

• usual column definitions, row heights, etc.

HTML template has

<ag-grid-angular
style="width: 100%; height: 100%;"
[rowData]="subscriptions"
[columnDefs]="colDefs"
[getRowHeight]="getRowHeight"
[class]="themeClass"
[sideBar]="sideBar"
[domLayout]="domLayout"
(gridReady)="onGridReady($event)"
/>


Broken grid looks like:

I expect to see:

The component has no bindings. I call use it in application compontent HTML template as simple: <app-topic-list></app-topic-list>

I've tried:

1. Removed HTTP request in onGridReady.
2. Removed custom cell renderer.

None of that helped.

Have you got any suggestions?

Thanks, Mau.

Continue reading...