Problemas para configurar la tabla de muestra. "No se pudo encontrar el modelo de fila coincidente para rowModelType clientSide"

He estado revisando el tutorial "Comenzando" para ag-grid en el proyecto nuevo. Completó todos los pasos pero recibió un error que decía

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

Comparé todo mi código con ejemplos proporcionados en el tutorial y algunos ejemplos de plunker, y no noté ninguna diferencia. Intenté importar ClientSideRowModelModule al app.module pero las interfaces no coincidían con lo angular solicitado, por lo que no funcionó. No tengo ideas y no pude encontrar ninguna información sobre cómo solucionarlo.

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 }
  ];...

Estoy usando Angular: 8.2.10, CLI angular: 8.2.2, npm: 6.9.0

En su app.component.ts, primero debe importar ClientSideRowModelModule

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

Luego, dentro de la clase AppComponent, debe crear una variable de matriz de módulo como esta:

modules: Module[] = [ClientSideRowModelModule];

Finalmente, en su app.component.html, debe vincularlo al componente ag-grid-angular

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

Para ver más recursos en la documentación de AgGrid , es el paso 3 en la instalación de módulos AgGrid.

Para resolver este problema, primero tuve que importar ModuleRegistry y AllCommunityModules en maint.ts y agregar ModuleRegistry.registerModules (AllCommunityModules); a continuación justo antes de platformBrowserDynamic (). bootstrapModule (AppModule) como:

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


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

Por último, en el componente (por ejemplo, users.component.ts ) lo utilicé importando AllCommunityModules y declarando la variable como:

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


public modules: Module[] = AllCommunityModules;

Tengo la idea de esta respuesta aquí

He estado usando la versión de la comunidad sin problemas. Acabo de descargar una versión de prueba de Enterprise y todo cambió. Cuando me encontré con este problema, aprendí que [modules] = "modules" es necesario en la cuadrícula. Eso requiere que estas dos líneas se incluyan en el componente:

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

Nunca he tenido que hacer esto antes en la versión comunitaria, pero rápidamente corrigió el problema. La respuesta que se aceptó anteriormente es declarar lo que debe suceder cuando su aplicación está integrando solo módulos individuales. Según la documentación : "Si elige seleccionar módulos individuales, entonces, como mínimo, se debe especificar un Modelo de fila. Después de eso, todos los demás módulos son opcionales según sus requisitos".