peterc peterc - 1 year ago 272
AngularJS Question

Error when trying to use ag-grid in ionic2

I am new to Ionic 2 and to AG-grid. I have been playing with an example ionic 2 template (sidemenu), and imported into Visual Studio 2015. All seems to run fine.

I want to find a data grid to use, and came across ag-grid. so wanted to explore this in Ionic 2 application.

Following the instructions here, I've installed the node package, so I have the following in my package.json

"ag-grid": "^4.2.7",
"ag-grid-ng2": "^4.2.2",

I have imported into the test .ts file and included the directive ..

import {AgGridNg2} from 'ag-grid-ng2/main'
import {GridOptions} from 'ag-grid/main'

directives: [AgGridNg2],
templateUrl: 'build/pages/aggrid-page/aggrid-page.html'
export class AgGridPage {
public data: Array<GridRow>;
public columnDefs;
public gridOptions: any;
public showToolPanel;

Now, I am not sure what to do with the line than mention the SystemX..

packages: {
lib: {

so I have not done anything there.

I've also included the css files in index.html

<link href="../node_modules/ag-grid/dist/styles/ag-grid.css" rel="stylesheet" />
<link href="../node_modules/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet" />

and I am getting 404 for these (not sure why, as the path seem correct).

The biggest error is the ag-grid tag creates an error.

So as per the example I have the following in my page html..

<ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh"

// boolean values 'turned on'

// simple values, not bound

However, when I run (using ionic serve), I get the following error..

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Unexpected closing tag "ag-grid-ng2" ("

[ERROR ->]</ag-grid-ng2>
"): AgGridPage@31:2

So it's not liking the ag-grid-ng2 tag, so I have not set something up right.

Does anyone know if there are more step involved in integrating this ag-grid to Ionic? IS there something more that needs to include the ag-grid lib files into app.bundle.js?

Thank in advance for any help

Answer Source

You're missing the closing bracket >:

  rowSelection="multiple"> <=== here
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download