Trouble setting up sample table. "Could not find matching row model for rowModelType clientSide"

Question

I've been going through the "Getting Started" tutorial for the ag-grid on the fresh project. Completed all the steps but got an error saying

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

Compared all my code with examples provided in the tutorial and some plunker examples, and didn't notice any differences. Tried importing ClientSideRowModelModule to the app.module but interfaces did not match with what angular requested, so it didn't work. I'm out of ideas and failed to find any info on how to fix it.

app.module.ts:

    ... imports: [
    BrowserModule,
    AppRoutingModule,
    AgGridModule.withComponents([])
  ],...

app.cpmponent.html:

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

app.component.ts:

    ...columnDefs = [
      {headerName: 'Make', field: 'make' },
      {headerName: 'Model', field: 'model' },
      {headerName: 'Price', field: 'price'}
  ];

  rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];...

I'm using Angular: 8.2.10, Angular CLI: 8.2.2, npm: 6.9.0

Towboat

Answer 1

In your app.component.ts, you first need to import the ClientSideRowModelModule

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

Then inside the AppComponent class, you need to create a module array variable like this:

modules: Module[] = [ClientSideRowModelModule];

Finally, in your app.component.html, you need to bind it to the ag-grid-angular component

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

For further resource look at AgGrid's documentation, it is step 3 on installing AgGrid Modules.

Being

Thank you very much! I should have spent a little bit more time reading the documentation – Towboat

What happens when you use the enterprise version? I import all of the ag-grid modules and I can see it includes this one, yet I'm still getting this same error :/ – Polled

@StevieStar i am also facing the same issue, issue got resolved for u? – Picrite

@RuchiGupta If you haven't solved this yet, it looks like you can do the same thing as the community version. Wherein you can mix and match enterprise modules along with the community modules. ag-Grid has since revamped the documentation page when I first posted my anwser. – Being

Answer 2

I have been using the community version with no issues. I just downloaded a trial of enterprise and everything changed. When I ran into this issue, I learned that [modules]="modules" is required on the grid. That requires these two lines to be included on the component:

import { AllModules } from '@ag-grid-enterprise/all-modules';
modules: Module[] = AllModules;

I've never had to do this before in community version, but it quickly corrected the issue. The answer that was accepted above is stating what needs to happen when your application is integrating only individual modules. Per the documentation: "If you choose to select individual modules then at a minimum the a Row Model need to be specified. After that all other modules are optional depending on your requirements".

Lundin

Answer 3

To solve this problem, I had to first import ModuleRegistry and AllCommunityModules in maint.ts and add ModuleRegistry.registerModules(AllCommunityModules); below just before platformBrowserDynamic().bootstrapModule(AppModule) like:

import { ModuleRegistry, AllCommunityModules } from '@ag-grid-community/all-modules';


ModuleRegistry.registerModules(AllCommunityModules);
platformBrowserDynamic().bootstrapModule(AppModule)
 .catch(err => console.error(err));

Lastly, in the component (e.g. users.component.ts) I used it by importing the AllCommunityModules and declaring the variable like:

import { AllCommunityModules } from '@ag-grid-community/all-modules';


public modules: Module[] = AllCommunityModules;

I got the idea from this answer here

Kuhns

Answer 4

It looks like you have installed AG Grid via its modules but then the code you are following assumes the use of the packaged versions.

As of v27 the all-modules packages are no longer recommended instead you should just use the following packages to have access to all the grid features.

"ag-grid-community": "^27.0.0",
"ag-grid-enterprise": "^27.0.0"

You only need to worry about the scoped packages if you are trying to reduce your bundle size. In that case, you should include the specific feature modules that you require.

From the docs

It is important that you do not mix packages and modules in the same application as this will result in AG Grid being included twice and doubling your bundle size! All modules are scoped by either @ag-grid-community/* or @ag-grid-enterprise/* and should not be mixed with the standalone packages of ag-grid-community and ag-grid-enterprise.

Modules	Packages
@ag-grid-community/xxxxx	ag-grid-community
@ag-grid-enterprise/xxxxx	ag-grid-enterprise

I have written about this more in this blog post.

Reinhold