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:14) 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:14) in /home3/ceolter/public_html/ag-grid.com/documentation-main/documentation_header.php on line 38
Angular Datagrid using SystemJS
Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

Misc

Github stars make projects look great. Please help, donate a star, it's free.
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.

For Just in Time (JIT) Compilation

You will need to configure SystemJS for ag-grid and ag-grid-component as follows:

System.config({
    map: {
        lib: 'lib',
        // 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: {
        'ag-grid-angular': {
            defaultExtension: "js"
        },
        'ag-grid': {
            defaultExtension: "js"
        },
        'ag-grid-enterprise': {
            defaultExtension: "js"
        }
        ...other packages
    }
}

For Ahead-of-Time (AOT) Compilation

We'll use SystemJS Builder for rollup.

// gulpfile
var gulp = require('gulp');
var SystemBuilder = require('systemjs-builder');

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

    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
            });
        })
});
// aot systemjs config
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',
            // 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'
            }
        }
    }
);

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.