I have found 2 issues with the way ag-grid dependency is structured and with its documentation. Hopefully somebody can refer me to a good typescript Angular1.x samples where ag-grid is used.
I have a basic AngularJs SPA project
I installed "ag-grid": "3.1.0" with
bower install ag-grid
by adding the dependency to my bower.json in Visual Studio 2015 and as result it adds under bower_components the following structure:
ag-grid
|
|-- dist
|--src
|
|--ts
|
...
The problem I have is that unless I physically delete the /bower_components/ag-grid/src folder, Visual Studio will show 926 errors within ts files under that source folder. Error such as:
TS2345 Argument of type 'this' is not assignable to parameter of type 'Grid'.
Type 'ag.grid.Grid' is not assignable to type 'ag.grid.Grid'. TypeScript Virtual Projects C:\MyProject\bower_components\ag-grid\src\ts\grid.ts
and many duplicate issues between bower_components/ag-grid/dist/ag-grid.ts and bower_components/ag-grid/src/ts/widgets/agDropdownList.ts such as:
TS2300 Build: Duplicate identifier 'AgDropdownList'
TS2300 Build: Duplicate identifier 'AgDropdownList'
I understand there are TS classes and other names duplicated and Visual Studio 2016 does not like that. But is this an expected result? Why to have the sources included in a bower dependency. Is it in case I want to generate (with Gulp for example) my own dist/ag-grid.js? If so why to include then the dist/ag-grid.ts folder if it's going to conflict?
I am not too familiar with front-end development and task-runner strategies so maybe this is a common practice and developers are supposed to delete the /bower_components/ag-grid/src folder.
If instead deleting the /bower_components/ag-grid/src folder I delete the bower_components/ag-grid/dist/ag-grid.ts I still get 13 errors such as
TS2304 Build: Cannot find name 'exports'
TS2304 Build: Cannot find name 'module'
and it even has a reference to /// <reference path="../../typings/tsd" /> that is broken as there is no typings folder at all.
It feels as if this dependency was a little bit messy, doesn't it?
The other thing that makes me confused about ag-grid is that in the sample it says that an AngularJs controller would need the ngGrid dependency. However this dependency is not being used. This is my example without this dependency injected:
The view:
<div ng-controller="app.shipments.ShipmentsController as shipments">
<h1>Shipments</h1>
<div ag-grid="shipments.gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>
The typescript controller:
module app.shipments {
'use strict';
interface IShipmentsScope {
gridOptions: ag.grid.GridOptions;
}
class ShipmentsController implements IShipmentsScope {
static $inject = [
];
constructor() {
}
gridOptions: ag.grid.GridOptions = {
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 }
]
};
}
angular
.module('app.shipments')
.controller('app.shipments.ShipmentsController', ShipmentsController);
}
That works properly as long as my server serves the JS dependency and 2 css:
<link href="../bower_components/ag-grid/dist/ag-grid.css" rel="stylesheet" />
<link href="../bower_components/ag-grid/dist/theme-fresh.css" rel="stylesheet" />
<script src="../bower_components/ag-grid/dist/ag-grid.js"></script>
I guess what I am asking for is a clarification on why the bower dependency is structured in such a way, what is the common practice when developing with such dependency for VS not to complain about TS errors and a clarification on whether the agGrid dependency is necessary at all to be injected in AngularJs controllers. :-) Thank you!