ag-grid does not work properly with angular 1.x - datatable

Question

I am trying to use ag-grid for one of my project work and was trying to configure it with webpack & Angular 1.6
i have configured it as follow
Module
var agGrid = require('ag-grid');
agGrid.initialiseAgGridWithAngular1(angular);
module.exports = angular.module('transModule', ['agGrid'])
.component('transComponent', transComponent)
.name;
Controller
var columnDefs = [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"}
];
var rowData = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
];
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: rowData
};
html
<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
but when i use i, it displays as follow
then i tried adding the stylesheets as follow
require('ag-grid/dist/styles/ag-grid.css');
require('ag-grid/dist/styles/theme-fresh.css');
yet again it the table want render properly and it will show as follow
is there anything um missing?? I would much appreciate if you could give me some headsup??

Answer 1

I noticed in ag-grid's package.json it was referenced main.js as entry point, and I actually found the whole lib folder content loaded in the Source tab of Chrome DevTools.
This was due to the way I was requiring ag-grid:
var agGrid = require('ag-grid');
// get ag-Grid to create an Angular module and register the ag-Grid directive
agGrid.initialiseAgGridWithAngular1(angular);
var myApp = 'myApp';
module.exports = myApp;
angular
.module(myApp, [
'agGrid'
])
Even if the "get-started" docs don't list a Webpack based solution, they do say to include the dist/ag-grid.js file or one of the minified/noStyle versions, so I changed the first line like this:
var agGrid = require('ag-grid/dist/ag-grid.min.js');