ag-Grid: could not find matching row model for rowModelType clientSide

Question

I'm trying to recreate this example in the ag-grid docs: https://www.ag-grid.com/javascript-grid-master-detail/

and I'm getting this error which I'm not sure why. Everything else has seemed to work fine:

ag-Grid: could not find matching row model for rowModelType clientSide
ag-Grid: Row Model "Client Side" not found. Please ensure the ClientSideRowModelModule is loaded using: import '@ag-grid-community/client-side-row-model';

And here is the exact code in my component:

import { HttpClient } from "@angular/common/http";
import { AllModules } from "@ag-grid-enterprise/all-modules";
import "@ag-grid-community/all-modules/dist/styles/ag-grid.css";
import "@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css";

@Component({
  selector: "my-app",
  template: `
    <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-balham"
      [modules]="modules"
      [columnDefs]="columnDefs"
      [masterDetail]="true"
      [detailCellRendererParams]="detailCellRendererParams"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  `
})
export class TopsheetComponent {
  private gridApi;
  private gridColumnApi;
  public modules  = AllModules;

  private columnDefs;
  private detailCellRendererParams;
  private rowData;

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        field: "name",
        cellRenderer: "agGroupCellRenderer"
      },
      { field: "account" },
      { field: "calls" },
      {
        field: "minutes",
        valueFormatter: "x.toLocaleString() + 'm'"
      }
    ];
    this.detailCellRendererParams = {
      detailGridOptions: {
        columnDefs: [
          { field: "callId" },
          { field: "direction" },
          { field: "number" },
          {
            field: "duration",
            valueFormatter: "x.toLocaleString() + 's'"
          },
          { field: "switchCode" }
        ],
        onFirstDataRendered: function(params) {
          params.api.sizeColumnsToFit();
        }
      },
      getDetailRowData: function(params) {
        params.successCallback(params.data.callRecords);
      },
      template: function(params) {
        var personName = params.data.name;
        return (
          '<div style="height: 100%; background-color: #EDF6FF; padding: 20px; box-sizing: border-box;">' +
          '  <div style="height: 10%;">Name: ' +
          personName +
          "</div>" +
          '  <div ref="eDetailGrid" style="height: 90%;"></div>' +
          "</div>"
        );
      }
    };
  }

  onFirstDataRendered(params) {
    params.api.sizeColumnsToFit();
    setTimeout(function() {
      params.api.getDisplayedRowAtIndex(1).setExpanded(true);
    }, 0);
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get(
        "https://raw.githubusercontent.com/ag-grid/ag-grid-docs/latest/src/javascript-grid-master-detail/template-callback-customisation/data/data.json"
      )
      .subscribe(data => {
        this.rowData = data;
      });
  }
}

It's pretty much identical to the example in the docs.

Here are the dependencies in my package.json

"dependencies": {
    "@ag-grid-enterprise/all-modules": "^22.1.2",
    "ag-grid-angular": "^22.1.1",
    "ag-grid-community": "^22.1.1",
    "ag-grid-enterprise": "^22.1.1",
}

Without all of these dependencies, I run into issues. Is there something I'm missing here? I've added everything correctly in my app.module.ts as well:

import { AgGridModule } from 'ag-grid-angular';

@NgModule({
    imports: [
       AgGridModule.withComponents([])
    ]
})

^ This was shortened to make it easier to read. But am I missing something obvious here?

Answer 1

I apologize for this but I created a StackBlitz and the stupid thing would not allow me to fork. This is not a complete answer but I am providing it here because it is too long for a comment.

Like you, I was going crazy as well and nothing was working. I was getting the same error as you and when I changed it to ClientSideRowModelModule, I would get a warning that I cannot use MasterDetail because it is not imported.

Try providing the modules globally as outlined here (https://www.ag-grid.com/javascript-grid-modules/) in main.ts. If I can recall correctly, I imported ModuleRegistry from @ag-grid-community/all-modules (@ag-grid-enterprise/all-modules did not have it like they show in the documentation), import AllModules from @ag-grid-enterprise/all-modules and then do ModuleRegistry.registerModules(AllModules); right before platformBrowserDynamic().bootstrapModule. This removed the errors and warnings (just the error/warning of not providing a license key). The theming of it was off in my view but maybe that can be an easy fix.

IMO, this is bad documentation/implementation from ag-grid, seems to be all over the place. For instance, if you can't copy and paste their demonstration solution and for it not to work, pretty bad if you ask me.