Problème lors de la configuration de la table d'échantillons. "Impossible de trouver le modèle de ligne correspondant pour rowModelType clientSide"

J'ai parcouru le tutoriel "Mise en route" pour l'ag-grid sur le nouveau projet. A terminé toutes les étapes mais a obtenu une erreur disant

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

J'ai comparé tout mon code avec des exemples fournis dans le tutoriel et quelques exemples de plunker, et je n'ai remarqué aucune différence. J'ai essayé d'importer ClientSideRowModelModule dans l'app.module mais les interfaces ne correspondaient pas à ce que l'angulaire demandait, donc cela n'a pas fonctionné. Je suis à court d'idées et je n'ai trouvé aucune information sur la façon de le réparer.

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

J'utilise Angular: 8.2.10, Angular CLI: 8.2.2, npm: 6.9.0

Dans votre app.component.ts, vous devez d'abord importer ClientSideRowModelModule

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

Ensuite, à l'intérieur de la classe AppComponent, vous devez créer une variable de tableau de modules comme celle-ci:

modules: Module[] = [ClientSideRowModelModule];

Enfin, dans votre app.component.html, vous devez le lier au composant ag-grid-angular

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

Pour plus de ressources, consultez la documentation d'AgGrid , il s'agit de l'étape 3 sur l'installation des modules AgGrid.

Pour résoudre ce problème, j'ai dû d'abord importer ModuleRegistry et AllCommunityModules dans maint.ts et ajouter ModuleRegistry.registerModules (AllCommunityModules); ci-dessous juste avant platformBrowserDynamic (). bootstrapModule (AppModule) comme:

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


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

Enfin, dans le composant (par exemple users.component.ts ), je l'ai utilisé en important les AllCommunityModules et en déclarant la variable comme:

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


public modules: Module[] = AllCommunityModules;

J'ai eu l'idée de cette réponse ici

J'utilise la version communautaire sans aucun problème. Je viens de télécharger un essai d'entreprise et tout a changé. Lorsque j'ai rencontré ce problème, j'ai appris que [modules] = "modules" est requis sur la grille. Cela nécessite que ces deux lignes soient incluses dans le composant:

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

Je n'ai jamais eu à le faire auparavant dans la version communautaire, mais cela a rapidement corrigé le problème. La réponse acceptée ci-dessus indique ce qui doit se produire lorsque votre application n'intègre que des modules individuels. Selon la documentation : "Si vous choisissez de sélectionner des modules individuels, vous devez au moins spécifier un modèle de ligne. Après cela, tous les autres modules sont facultatifs en fonction de vos besoins".