Given the small hopes for receiving non-paid support from ag-grid team, and hoping for wider audience I post the same here. Original github issue here https://github.com/ag-grid/ag-grid/issues/8246

What happens:

• I follow the minium required steps 1-6 described here to setup ag-grid https://www.ag-grid.com/angular-data-grid/getting-started/
• When I enter a page with the ag-grid I get the following error:

TypeError: rowCtrls[i].getAllCellCtrls is not a function
    at RowRenderer.getAllCellCtrls (main.esm.mjs:35101:37)
    at forEachCellWithThisCol (main.esm.mjs:34832:14)
    at leftChangedListener (main.esm.mjs:34839:9)
    at callback (main.esm.mjs:1017:124)
    at main.esm.mjs:1021:9
    at Set.forEach (<anonymous>)
    at processEventListeners (main.esm.mjs:1013:82)
    at EventService.dispatchToListeners (main.esm.mjs:1027:7)
    at EventService.dispatchEvent (main.esm.mjs:996:10)
    at _Column2.setLeft (main.esm.mjs:1450:25)

It’s about the line

const cellCtrls = rowCtrls[i].getAllCellCtrls();

• Sometimes the grid loads, but when I went to another lazy-loaded tab and went back, then this error would show up.
• Last version when the problem doesn’t occur for me is 31.2.1
• Compared to the cases when it works I don’t have any “ctrls”. It breaks when the debugger shows the array has “ctrls”.

I tried to reproduce the problem, so I created a new Angular 17.3 project with vite, setup the base example and it worked…
So I went deeper and also tried:

• copy-pasting and installing all the packages from the project, where the problem occurs
• Setting up lazy loaded modules(App Module, lazy module A and lazy module B with ag-grid), just like I have in my project.
• Selectivly trying to remove imports from the component where the problem occurs, but it’s a dead end, as the conclusion was that if I comment that function which pretty much does nothing special, then the grid may work.
• Setting back change-detection to Default on the component, where grid is

Sadly none of the above managed to reproduce the problem.
I’m looking for any hints how to tackle the problem or perhaps someone who knows the code might have a clue what’s breaking

Please tell us about your environment:

npm 9.6.3,
node 20.11.1,
Angular using vite “builder”: “@angular-devkit/build-angular:application”

• AG Grid version: Any newer than 31.2.1 has error. 31.3.0, 31.3.1, 31.3.2, 32.0.0

• Browser:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0

• Language: [all | TypeScript X.X | ES6/7 | ES5]

package.json

{
  "name": "",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration dev",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@internal-library-common-ux-angular": "17.5.5",
    "@ag-grid-community/angular": "31.2.1",
    "@angular-slider/ngx-slider": "^17.0.2",
    "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@microsoft/applicationinsights-angularplugin-js": "3.0.3",
    "@microsoft/applicationinsights-web": "3.0.3",
    "@ng-select/ng-select": "~12.0.7",
    "ag-grid-angular": "31.2.1",
    "angular-auth-oidc-client": "~17.0.0",
    "angular-gridster2": "~17.0.0",
    "bootstrap": "5.3.3",
    "d3": "~7.8.5",
    "lodash": "^4.17.21",
    "ngx-float-ui": "^17.1.3",
    "ngx-ui-scroll": "~3.1.0",
    "rxjs": "~7.8.0",
    "tslib": "~2.3.0",
    "zone.js": "~0.14.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.0",
    "@angular-eslint/builder": "17.3.0",
    "@angular-eslint/eslint-plugin": "17.3.0",
    "@angular-eslint/eslint-plugin-template": "17.3.0",
    "@angular-eslint/schematics": "17.3.0",
    "@angular-eslint/template-parser": "17.3.0",
    "@angular/cli": "~17.3.0",
    "@angular/compiler-cli": "^17.3.0",
    "@types/jasmine": "~4.3.0",
    "@types/lodash": "^4.14.200",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "eslint": "^8.57.0",
    "jasmine-core": "~5.1.2",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }
}

tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}