Warning: Cannot modify header information - headers already sent by (output started at /home3/ceolter/public_html/ag-grid.com/ag-grid-angular-systemjs/index.php:15) in /home3/ceolter/public_html/ag-grid.com/documentation-main/documentation_header.php on line 36

Warning: Cannot modify header information - headers already sent by (output started at /home3/ceolter/public_html/ag-grid.com/ag-grid-angular-systemjs/index.php:15) in /home3/ceolter/public_html/ag-grid.com/documentation-main/documentation_header.php on line 38
Angular Datagrid using SystemJS
Expand All

  Getting Started

  Reference

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Angular - Building with SystemJS

We document the main steps required when using SystemJS and SystemJS-Builder below, but please refer to ag-grid-angular-example on GitHub for a full working example of this.

Initialise Project

mkdir ag-grid-systemjs
cd ag-grid-systemjs
npm init
// accept defaults

Install Dependencies

npm i --save ag-grid ag-grid-angular
npm i --save @angular/common @angular/compiler @angular/compiler-cli @angular/core @angular/platform-browser @angular/platform-browser-dynamic @angular/router typescript rxjs core-js zone.js
npm i --save-dev systemjs@0.19.x systemjs-builder@0.15.33 concurrently@2.2.0 lite-server@2.2.2 gulp@3.9.1 gulp-ngc@0.1.x @types/node@6.0.45

// optional - only necessary if you're using any of the Enterprise features
npm i --save ag-grid-enterprise

Our application will be a very simple one, consisting of a single Module, a single Component and a bootstrap file, as well a few utility & configuration files.

You can either create the project by hand, or check it out from our Angular Seed Repo in GitHub.

The resulting project structure will look like this:

ag-grid-systemjs
├── aot
│   ├── ag-grid.css
│   ├── bs-config.json
│   ├── index.html
│   ├── shim.min.js
│   ├── systemjs.config.js
│   ├── theme-fresh.css
│   └── zone.min.js
├── app
│   ├── app.component.html
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── boot-aot.ts
│   └── boot.ts
├── gulpfile.js
├── index.html
├── node_modules
├── package.json
├── systemjs.config.js
├── tsconfig-aot.json
└── tsconfig.json
// app/app.module.ts 
import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
// ag-grid
import {AgGridModule} from "ag-grid-angular/main";
// application
import {AppComponent} from "./app.component";

@NgModule({
    imports: [
        BrowserModule,
        AgGridModule.withComponents([]
        )
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}
// app/app.component.ts 
import {Component} from "@angular/core";

import {GridOptions} from "ag-grid/main";

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html'
})
export class AppComponent {
    public gridOptions:GridOptions;
    public rowData:any[];
    public columnDefs:any[];

    constructor() {
        // we pass an empty gridOptions in, so we can grab the api out
        this.gridOptions = {
            onGridReady: () => {
                this.gridOptions.api.sizeColumnsToFit();
            }
        };
        this.columnDefs = [
            {headerName: "Make", field: "make"},
            {headerName: "Model", field: "model"},
            {headerName: "Price", field: "price"}
        ];
        this.rowData = [
            {make: "Toyota", model: "Celica", price: 35000},
            {make: "Ford", model: "Mondeo", price: 32000},
            {make: "Porsche", model: "Boxter", price: 72000}
        ];
    }
}
// app/app.component.html 
<ag-grid-angular #agGrid style="width: 500px; height: 150px;" class="ag-fresh"
                 [gridOptions]="gridOptions"
                 [columnDefs]="columnDefs"
                 [rowData]="rowData">
</ag-grid-angular>

Just in Time (JIT) Compilation

Our boot file for Just in Time (JIT) looks like this:

// app/boot.ts 
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
import {AppModule} from "./app.module";

// for enterprise customers
// import {LicenseManager} from "ag-grid-enterprise/main";
// LicenseManager.setLicenseKey("your license key");

platformBrowserDynamic().bootstrapModule(AppModule);

Our tsconfig.json file looks like this - note we're excluding the AOT related files (see AOT below) here:

// tsconfig.json 
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "lib": ["dom","es2015"]
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*",
    "aot/*",
    "docs/*",
    "**/*-aot.ts"
  ]
}

For Just in Time (JIT) compilation our SystemJS Configuration file looks like this:

// systemjs.config.js 
(function (global) {
    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-angular': 'node_modules/ag-grid-angular',
                'ag-grid': 'node_modules/ag-grid',
                'ag-grid-enterprise': 'node_modules/ag-grid-enterprise'
            },
            packages: {
                app: {
                    main: './boot.js'
                },
                'ag-grid': {
                    main: 'main.js'
                }
            }
        }
    );
})(this);
    
// index.html 
<!DOCTYPE html>
<html>

<head>
    <title>ag-Grid Angular JIT Example</title>

    <!-- polyfills -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- ag-grid CSS -->
    <!-- In your build, you will probably want to include the css in your bundle. -->
    <!-- To do this you will use a CSS Loader. How to do this is not an ag-Grid -->
    <!-- problem, so I've not included how to do it here. For simplicity, and -->
    <!-- explicitness, the CSS files are loaded in directly here. -->
    <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"/>

    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) {
            console.error(err);
        });
    </script>

</head>

<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>

</html>
    

Finally, we can add the following utility scrips to our package.json file to run our app:

"scripts": {
  "lite": "lite-server",
  "tsc:w": "tsc -p tsconfig.json -w",
  "start": "concurrently \"npm run tsc:w\" \"npm run lite\" "
},
    

We can now run npm start to run the development setup.

For Ahead-of-Time (AOT) Compilation

Our boot file for Ahead-of-Time (AOT) is a bit different this time - this time we'll make use of the compiled factories:

// app/boot-aot.ts 
import {platformBrowser} from "@angular/platform-browser";
import {AppModuleNgFactory} from "../aot/app/app.module.ngfactory";

// for enterprise customers
// import {LicenseManager} from "ag-grid-enterprise/main";
// LicenseManager.setLicenseKey("your license key");

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

We have a separate tsconfig file (tsconfig-aot.json) for AOT mode::

// tsconfig-aot.json 
{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    /* with ts 2.1 commnents seem to trip systemjs-builder up */
    "removeComments": true,
    "noImplicitAny": false,
    "lib": ["dom","es2015"],
    "outDir": "aot"
  },
  "exclude": [
    "node_modules/",
    "docs"
  ],
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit": true
  }
}

Our SystemJS config file is different for AOT:

// aot/systemjs.config.js 
(function (global) {
    System.config({
            defaultJSExtensions: true,
            map: {
                // angular bundles
                '@angular/core': 'node_modules/@angular/core',
                '@angular/common': 'node_modules/@angular/common',
                '@angular/compiler': 'node_modules/@angular/compiler/index.js',
                '@angular/platform-browser': 'node_modules/@angular/platform-browser',
                '@angular/forms': 'node_modules/@angular/forms',
                '@angular/router': 'node_modules/@angular/router',
                '@angular/http': 'node_modules/@angular/http',
                // 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-angular' : 'node_modules/ag-grid-angular',
                'ag-grid' : 'node_modules/ag-grid',
                'ag-grid-enterprise' : 'node_modules/ag-grid-enterprise'
            },
            packages: {
                '@angular/core': {
                    main: 'index.js'
                },
                '@angular/common': {
                    main: 'index.js'
                },
                '@angular/platform-browser': {
                    main: 'index.js'
                },
                '@angular/forms': {
                    main: 'index.js'
                },
                '@angular/router': {
                    main: 'index.js'
                },
                '@angular/http': {
                    main: 'index.js'
                },
                'ag-grid': {
                    main: 'main.js'
                }
            }
        }
    );
})(this);

Our AOT index.html file - this time we'll be using a bundled AOT version of the code. This will result is quicker startup and runtime behaviour, as well as less network traffic:

<!DOCTYPE html>
<html>

<head>
    <title>ag-Grid Angular 2 AOT Example</title>
    <base href="/">

    <script src="shim.min.js"></script>
    <script src="zone.min.js"></script>

    <!-- ag-grid CSS -->
    <!-- In your build, you will probably want to include the css in your bundle. -->
    <!-- To do this you will use a CSS Loader. How to do this is not an ag-Grid -->
    <!-- problem, so I've not included how to do it here. For simplicity, and -->
    <!-- explicitness, the CSS files are loaded in directly here. -->
    <link href="ag-grid.css" rel="stylesheet" />
    <link href="theme-fresh.css" rel="stylesheet" />

    <script>window.module = 'aot';</script>
</head>

<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
<script src="./dist/bundle.js"></script>

</html>
    

We'll use SystemJS Builder for rollup, and ngc to compile:

// gulpfile.js
const gulp = require('gulp');
const ngc = require('gulp-ngc');
const SystemBuilder = require('systemjs-builder');

gulp.task('ngc', () => {
    return ngc('./tsconfig-aot.json');
});

gulp.task('aot-bundle', function () {
    const builder = new SystemBuilder();

    return builder.loadConfig('./aot/systemjs.config.js')
        .then(function () {
            return builder.buildStatic('aot/app/boot-aot.js', './aot/dist/bundle.js', {
                encodeNames: false,
                mangle: false,
                minify: true,
                rollup: true,
                sourceMaps: true
            });
        })
});

There are a few shim & polyfill files we need too:

cp ./node_modules/core-js/client/shim.min.js aot/
cp ./node_modules/zone.js/dist/zone.min.js aot/
cp ./node_modules/ag-grid/dist/styles/ag-grid.css aot/
cp ./node_modules/ag-grid/dist/styles/theme-fresh.css aot/

We make use of lite-server to test the application, so let's create a AOT friendly config file for it:

// aot/bs-config.json
{
  "port": 8000,
  "files": ["./dist/**/*.{html,htm,css,js}"],
  "server": { "baseDir": "./aot" }
}
    

Finally, we can add the following utlity scripts to our package.json:

"build:aot": "gulp ngc && gulp aot-bundle",
"lite:aot": "lite-server -c aot/bs-config.json",

All the above items are specific to either Angular, SystemJS or SystemJS Builder. The above is intended to point you in the right direction. If you need more information on this, please see the documentation for those projects.