Problemas ao configurar a tabela de amostra. “Não foi possível encontrar o modelo de linha correspondente para rowModelType clientSide”

Eu estive passando pelo tutorial "Introdução" para o ag-grid no novo projeto. Concluiu todas as etapas, mas ocorreu um erro dizendo

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

Comparou todo o meu código com os exemplos fornecidos no tutorial e alguns exemplos mais ousados, e não notou nenhuma diferença. Tentei importar o ClientSideRowModelModule para o app.module, mas as interfaces não coincidiam com o angular solicitado, portanto não funcionou. Estou sem idéias e não consegui encontrar nenhuma informação sobre como corrigi-lo.

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

Estou usando Angular: 8.2.10, CLI Angular: 8.2.2, npm: 6.9.0

Em seu app.component.ts, primeiro você precisa importar o ClientSideRowModelModule

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

Em seguida, dentro da classe AppComponent, você precisa criar uma variável de matriz do módulo como esta:

modules: Module[] = [ClientSideRowModelModule];

Por fim, em seu app.component.html, é necessário vinculá-lo ao 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 obter mais recursos, consulte a documentação do AgGrid , é a etapa 3 na instalação dos módulos do AgGrid.

Para resolver esse problema, primeiro tive que importar ModuleRegistry e AllCommunityModules em maint.ts e adicionar ModuleRegistry.registerModules (AllCommunityModules); abaixo, pouco 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 fim, no componente (por exemplo, users.component.ts ), usei-o importando os AllCommunityModules e declarando a variável como:

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


public modules: Module[] = AllCommunityModules;

Eu peguei a ideia desta resposta aqui

Eu tenho usado a versão da comunidade sem problemas. Acabei de baixar um teste da empresa e tudo mudou. Quando me deparei com esse problema, aprendi que [modules] = "modules" é necessário na grade. Isso requer que essas duas linhas sejam incluídas no componente:

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

Eu nunca tive que fazer isso antes na versão da comunidade, mas isso rapidamente corrigiu o problema. A resposta que foi aceita acima é declarar o que precisa acontecer quando seu aplicativo estiver integrando apenas módulos individuais. De acordo com a documentação : "Se você optar por selecionar módulos individuais, no mínimo, será necessário especificar um modelo de linha. Depois disso, todos os outros módulos serão opcionais, dependendo de seus requisitos".