Problemi nella configurazione della tabella di esempio. "Impossibile trovare il modello di riga corrispondente per rowModelType clientSide"

Ho seguito il tutorial "Guida introduttiva" per la griglia ag sul nuovo progetto. Hai completato tutti i passaggi ma è stato visualizzato un errore

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

Confrontato tutto il mio codice con gli esempi forniti nel tutorial e alcuni esempi di plunker e non ho notato alcuna differenza. Ho provato a importare ClientSideRowModelModule nel modulo app ma le interfacce non corrispondevano a ciò che angolare richiesto, quindi non ha funzionato. Sono a corto di idee e non sono riuscito a trovare informazioni su come risolverlo.

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

Sto usando Angular: 8.2.10, CLI angolare: 8.2.2, npm: 6.9.0

In app.component.ts, devi prima importare ClientSideRowModelModule

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

Quindi all'interno della classe AppComponent, è necessario creare una variabile di array del modulo in questo modo:

modules: Module[] = [ClientSideRowModelModule];

Infine, nel tuo app.component.html, devi associarlo 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>

Per ulteriori approfondimenti sulla documentazione di AgGrid , è il passaggio 3 sull'installazione dei moduli AgGrid.

Per risolvere questo problema, ho dovuto prima importare ModuleRegistry e AllCommunityModules in maint.ts e aggiungere ModuleRegistry.registerModules (AllCommunityModules); sotto appena prima di platformBrowserDynamic (). bootstrapModule (AppModule) come:

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


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

Infine, nel componente (ad es. Users.component.ts ) l'ho usato importando AllCommunityModules e dichiarando la variabile come:

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


public modules: Module[] = AllCommunityModules;

Ho avuto l'idea da questa risposta qui

Ho usato la versione della community senza problemi. Ho appena scaricato una versione di prova di impresa e tutto è cambiato. Quando ho riscontrato questo problema, ho appreso che [moduli] = "moduli" è richiesto sulla griglia. Ciò richiede che queste due righe siano incluse nel componente:

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

Non ho mai dovuto farlo prima nella versione della community, ma ha risolto rapidamente il problema. La risposta che è stata accettata sopra sta affermando cosa deve accadere quando l'applicazione sta integrando solo i singoli moduli. Secondo la documentazione : "Se si sceglie di selezionare singoli moduli, è necessario specificare almeno un modello di riga. Successivamente, tutti gli altri moduli sono opzionali in base alle proprie esigenze".