ag grid angular 9 model problem .. it doesn't recognize in app model

Question

I'm using angular 9. i created a new project .. i tried to import Ag-grid package .. but for some reason it doesn't recognize ag-grid ..

i installed it properly - because i can see it in the import of the model ...

my code :

/*Modules*/

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { SharedModule } from './common/shared.module';
import { RepositoryModule } from './repository/repository.module';
import { AgGridModule } from 'ag-grid-angular';

/* components*/
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    PageNotFoundComponent,
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    /*imported Modules */
    SharedModule,
    AgGridModule.forRoot([]),
    RepositoryModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

component

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'MpManagement';

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

html

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

as you can see i imported it to my project but it doesn't recognize it

Answer 1

AgGridModule is imported incorrectly. It should be imported like -

imports: [
AgGridModule.withComponents([])],
// other imports
]

See a simple working example here