Problemy z konfiguracją przykładowej tabeli. „Nie można znaleźć pasującego modelu wiersza dla rowModelType clientSide”

Przejrzałem samouczek „Pierwsze kroki” dla ag-grid w nowym projekcie. Ukończono wszystkie kroki, ale pojawił się komunikat o błędzie

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

Porównałem cały mój kod z przykładami podanymi w samouczku i niektórymi przykładami plunkera i nie zauważyłem żadnych różnic. Próbowałem zaimportować ClientSideRowModelModule do app.module, ale interfejsy nie pasowały do ​​żądanego kąta, więc nie działało. Nie mam pomysłów i nie udało mi się znaleźć żadnych informacji, jak to naprawić.

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

Używam Angular: 8.2.10, Angular CLI: 8.2.2, npm: 6.9.0

W app.component.ts musisz najpierw zaimportować ClientSideRowModelModule

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

Następnie wewnątrz klasy AppComponent musisz utworzyć zmienną tablicy modułów taką jak ta:

modules: Module[] = [ClientSideRowModelModule];

Na koniec w app.component.html musisz powiązać go ze składnikiem kątowym ag-grid

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

Aby uzyskać dodatkowe zasoby, zapoznaj się z dokumentacją AgGrid , jest to krok 3 podczas instalowania modułów AgGrid.

Aby rozwiązać ten problem, musiałem najpierw zaimportować ModuleRegistry i AllCommunityModules do maint.ts i dodać ModuleRegistry.registerModules (AllCommunityModules); poniżej tuż przed platformąBrowserDynamic (). bootstrapModule (AppModule) jak:

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


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

Na koniec w komponencie (np. Users.component.ts ) wykorzystałem go, importując AllCommunityModules i deklarując zmienną, taką jak:

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


public modules: Module[] = AllCommunityModules;

Pomysł pochodzi z tej odpowiedzi tutaj

Korzystam z wersji społeczności bez żadnych problemów. Właśnie pobrałem wersję próbną przedsiębiorstwa i wszystko się zmieniło. Kiedy natknąłem się na ten problem, dowiedziałem się, że [moduły] = „moduły” są wymagane w sieci. Wymaga to włączenia tych dwóch wierszy do komponentu:

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

Nigdy wcześniej nie musiałem tego robić w wersji społecznościowej, ale szybko to rozwiązało problem. Odpowiedź, która została zaakceptowana powyżej, określa, co musi się stać, gdy aplikacja integruje tylko pojedyncze moduły. Zgodnie z dokumentacją : „Jeśli wybierzesz pojedyncze moduły, musisz określić przynajmniej model wiersza. Następnie wszystkie pozostałe moduły są opcjonalne w zależności od twoich wymagań”.