Ag-Grid问题：Angular优化配置导致样式失效

环境信息 #

Ag-Grid 32.2.2 Enterprise版本
Angular CLI: 18.2.7
Node: 20.17.0
Package Manager: npm 10.8.2
OS: win32 x64

问题现象 #

未开启优化的开发构建可正常运行，Chrome控制台无错误或警告。但运行生产构建，或在angular.json中配置"optimization":true时，Ag-Grid样式异常，Chrome 129.0.6668.90控制台出现以下错误：

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.

相关代码 #

组件TS导入部分 #

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);

组件类代码 #

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

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

  onGridReady(params: GridReadyEvent) {
    // 业务逻辑
  }
}

HTML模板 #

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

已尝试操作 #

• 移除onGridReady中的HTTP请求
• 移除自定义单元格渲染器
  以上操作均未解决问题

解决建议 #

1. 全局引入Ag-Grid样式：将Ag-Grid的CSS文件移至全局样式文件（如styles.css）中引入，避免组件级导入在优化构建时被延迟加载：

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

同时删除组件TS中的样式导入语句。

2. 延迟网格初始化：通过条件渲染延迟网格加载，确保样式已加载完成：

import { ViewChild, AfterViewInit } from '@angular/core';
import { AgGridAngular } from '@ag-grid-community/angular';

export class TopicListComponent implements AfterViewInit {
  @ViewChild(AgGridAngular) agGrid!: AgGridAngular;
  isGridReady = false;

  ngAfterViewInit() {
    setTimeout(() => {
      this.isGridReady = true;
    }, 50);
  }
}

修改HTML模板添加条件：

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

3. 调整Angular样式优化配置：在angular.json的生产构建配置中禁用未使用样式移除，避免Ag-Grid的CSS变量被误删：

"architect": {
  "build": {
    "options": {
      "optimization": {
        "styles": {
          "minify": true,
          "inlineCritical": false,
          "unused": false
        }
      }
    }
  }
}

4. 预定义CSS变量默认值：在全局样式中提前定义Ag-Grid依赖的CSS变量，确保网格初始化时已有值：

/* styles.css */
:root {
  --ag-row-height: 42px;
  --ag-list-item-height: 24px;
}

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