Error when trying to use ag-grid in ionic2

Question

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'

@Component({
   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..

System.config({
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"    
  [gridOptions]="gridOptions"
  [columnDefs]="columnDefs"
  [showToolPanel]="showToolPanel"
  [rowData]="rowData"

  // boolean values 'turned on'
  enableColResize
  enableSorting
  enableFilter

  // simple values, not bound
  rowHeight="22"
  rowSelection="multiple">  
</ag-grid-ng2>

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>
 </ion-content>
 "): 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

I also included ag-grid-ng2 with an ionic 2 project as you did and get the following error: app.bundle.js:49643 Uncaught TypeError: core_1.NgModule is not a function(anonymous function) @ app.bundle.js:49643378../agComponentFactory @ app.bundle.js:49655s @ app.bundle.js:1(anonymous function) @ app.bundle.js:1380../lib/agAware @ app.bundle.js:49751s @ app.bundle.js:1(anonymous function) @ app.bundle.js:11../components/sidebar/sidebar @ app.bundle.js:15s @ app.bundle.js:1e @ app.bundle.js:1(anonymous function) @ app.bundle.js:1 Navigated to localhost:8100/?restart=719616 Any idea? — Jürgen 'Kashban' Wahlmann
– Jürgen 'Kashban' Wahlmann, Commented Sep 22, 2016 at 9:39

yurzui · Accepted Answer · 2016-06-18 09:08:13Z

1

You're missing the closing bracket >:

  rowHeight="22"
  rowSelection="multiple"> <=== here
</ag-grid-ng2>

answered Jun 18, 2016 at 9:08

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

peterc Over a year ago

Hi thanks for that, may have been a copy paste error when I was trying to cut our some of the detail. I've make sure that I did have this closing > (updated the code block above) and removed the comments and the error is gone (no gird yet but this error is gone). Cheers!

Sonic Soul Over a year ago

I can confirm it was the comments that was the issue

Jürgen 'Kashban' Wahlmann · Accepted Answer · 2016-09-22 09:24:43Z

0

With respect to the stylesheets: You either need to change your gulp task to include them in the build (stylesheets are not included by default) or as I did copy or symlink both css files to your app/themes directory, rename them as *.scss and import them into app.core.scss. They will then be included into your app css in build/css.

Example:

@import "./ag-grid";
@import "./theme-fresh";

answered Sep 22, 2016 at 9:24

Jürgen 'Kashban' Wahlmann

1,5491 gold badge11 silver badges18 bronze badges

Collectives™ on Stack Overflow

Error when trying to use ag-grid in ionic2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related