Ag-grid will not render in JHipster app (Angular 7 + Webpack 4) - jhipster

Question

I have thoroughly followed the instructions in the following guides:
Get Started with ag-Grid in Your Angular Project
Angular Webpack 3
My app.module.ts includes:
import { AgGridModule } from 'ag-grid-angular';
...
#NgModule({
imports: [
...,
AgGridModule.withComponents([])
]
})
In vendor.css
#import "~ag-grid-community/dist/styles/ag-grid.css";
#import "~ag-grid-community/dist/styles/ag-theme-balham.css";
In the home.component.ts:
import { Component, OnInit } from '#angular/core';
import {GridOptions} from 'ag-grid-community';
#Component({
selector: 'jhi-home',
templateUrl: './home.component.html',
styleUrls: ['home.css']
})
export class HomeComponent implements OnInit {
private gridOptions: GridOptions;
public rowData: any[];
private columnDefs: any[];
constructor(
private accountService: AccountService,
private loginModalService: LoginModalService,
private eventManager: JhiEventManager
) {
this.gridOptions = <GridOptions>{
onGridReady: () => {
this.gridOptions.api.sizeColumnsToFit();
}
};
this.columnDefs = [
{headerName: 'Make', field: 'make'},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price'}
];
this.rowData = [
{make: 'Toyota', model: 'Celica', price: 35000},
{make: 'Ford', model: 'Mondeo', price: 32000},
{make: 'Porsche', model: 'Boxter', price: 72000}
];
}
ngOnInit() {
}
}
Eventually in the template I added the component:
<ag-grid-angular #agGrid style="width: 500px; height: 300px;"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="rowData">
</ag-grid-angular>
Although there are no errors at build, the grid will not render. That is the way my HTML looks after compilation:
I presume there may be an incompatibility between Angular 7/Webpack 4/the way Jhipster loads the app and ag-grid-angular.
Would you suggest any solution? Thank you!

Answer 1

You should import the AgGridModule on each one of your 'entities' apps modules, not on your main apps.module.ts.