ag-grid cell rendering error

Question

I am using the AG-GRID api to populate a table in my website under the main.ts file i have added the following code

import { bootstrap }        from 'angular2/platform/browser';
import { AppComponent }     from './app.component';
import { ROUTER_PROVIDERS } from 'angular2/router';
import { AgGridModule }     from 'ag-grid-ng2/main';

bootstrap(AppComponent, [ROUTER_PROVIDERS],AgGridModule);

my main component.ts file is as following

import { Component }   from 'angular2/core';
import { GridOptions } from 'ag-grid/main';

@Component({
    moduleId: module.id,
    templateUrl:"app/grid.component.html";
})

export class gridComponent{

    public gridOptions:GridOptions;

    constructor() {
        this.gridOptions = <GridOptions>{};
        this.gridOptions.rowData = this.createRowData();

        this.gridOptions.columnDefs = this.createColumnDefs();
    }

    private onCellValueChanged($event) {
        this.gridOptions.api.refreshCells([$event.node],["cube"]);
    }

    private createColumnDefs() {
        return [
            {headerName: "Row 1", field: "row", width: 140}
        ];
    }

    public refreshRowData() {
        let rowData = this.createRowData();
        this.gridOptions.api.setRowData(rowData);
    }

    private createRowData() {
        let rowData:any[] = [];

        for (var i = 0; i < 15; i++) {
            rowData.push({
                row: "Name" + i
            });
        }
        console.log(rowData);
        return rowData;
    }
}

When i compile i get a error of module not found. Can anyone help Thanks in advance

Have you added the declaration of it to app.module.ts? – Christopher Moore Jan 25 '17 at 18:19 — Christopher Moore, Jan 25 '17 at 18:19

Christopher Moore · Accepted Answer · 2017-01-25T18:34:34.133

You shouldn't declare it in main.ts, in app.module.ts you need something like the following:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { AgGridModule }  from 'ag-grid-ng2/main';

@NgModule({
    imports:[ 
        BrowserModule, 
        AgGridModule 
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

Then in system.config.js you need to tell angular where to find the ag-grid files:

System.config({
    map: {
        ...
        // ag libraries
        'ag-grid-ng2' : 'node_modules/ag-grid-ng2',
        'ag-grid' : 'node_modules/ag-grid',
    },
    packages: {
        'ag-grid-ng2': {
            defaultExtension: "js"
        },
        'ag-grid': {
            defaultExtension: "js"
        },
        ...other packages
    }
}

More information is available on the angular2 site https://www.ag-grid.com/ag-grid-angular-systemjs

I added it and getting a error http://localhost:3000/ag-grid-ng2/main 404 not found — skid, Jan 25 '17 at 18:29
Error loading http://localhost:3000/@angular/core as "@angular/core" after adding the dependency which you said to the system.config i am getting this error — skid, Jan 25 '17 at 18:52

Sean Landsman · Answer 2 · 2017-01-25T19:25:42.353

Take a look at the ag-Grid SystemJS Docs for an overview of what you need to do, but for a full working example you can also refer to the ag-Grid Angular Example Repo for full working examples (using either SystemJS, Webpack or AngularCLI).

Briefly though, ensure you've the following in your module:

@NgModule({
    imports: [
        BrowserModule,
        AgGridModule.withComponents([...optional Angular 2 Components to be used in the grid....]]),
        ...
})

And in your SystemJS config you might need to add:

System.config({
        defaultJSExtensions: true,
        map: {
            'app': 'app',
            // angular bundles
            '@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
            '@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'node_modules/@angular/http/bundles/http.umd.js',
            '@angular/router': 'node_modules/@angular/router/bundles/router.umd.js',
            '@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'node_modules/rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            // ag libraries
            'ag-grid-ng2': 'node_modules/ag-grid-ng2',
            'ag-grid': 'node_modules/ag-grid',
            'ag-grid-enterprise': 'node_modules/ag-grid-enterprise'
        },
        packages: {
            app: {
                main: './boot.js'
            },
            'ag-grid': {
                main: 'main.js'
            }
        }
    }
);

Error loading localhost:3000/@angular/core as "@angular/core" after adding the dependency which you said to the system.config i am getting this error — skid, Jan 25 '17 at 19:14
You'll need to add the angular libraries you need to - at the very least you'll need core and common. I've updated my answer to include the ones you might need — Sean Landsman, Jan 25 '17 at 19:24

ag-grid cell rendering error

2 Answers2

Linked