<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Angular 2 example</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style media="only screen">
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
      }
      html {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        overflow: auto;
      }
      body {
        padding: 1rem;
        overflow: auto;
      }
    </style>
        
    <!-- Polyfills -->
    <script src="https://unpkg.com/core-js@2.6.5/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.17/dist/zone.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <script>
        var appLocation = '';
        var boilerplatePath = '';
        var systemJsMap = {
    "@ag-grid-community/all-modules/dist/styles/ag-grid.css": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/styles/ag-grid.css",
    "@ag-grid-community/core/dist/styles/ag-grid.css": "https://unpkg.com/@ag-grid-community/core@23.2.0/dist/styles/ag-grid.css",
    "@ag-grid-community/all-modules/dist/styles/ag-theme-alpine-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/styles/ag-theme-alpine-dark.css",
    "@ag-grid-community/core/dist/styles/ag-theme-alpine-dark.css": "https://unpkg.com/@ag-grid-community/core@23.2.0/dist/styles/ag-theme-alpine-dark.css",
    "@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/styles/ag-theme-alpine.css",
    "@ag-grid-community/core/dist/styles/ag-theme-alpine.css": "https://unpkg.com/@ag-grid-community/core@23.2.0/dist/styles/ag-theme-alpine.css",
    "@ag-grid-community/all-modules/dist/styles/ag-theme-balham-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/styles/ag-theme-balham-dark.css",
    "@ag-grid-community/core/dist/styles/ag-theme-balham-dark.css": "https://unpkg.com/@ag-grid-community/core@23.2.0/dist/styles/ag-theme-balham-dark.css",
    "@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/styles/ag-theme-balham.css",
    "@ag-grid-community/core/dist/styles/ag-theme-balham.css": "https://unpkg.com/@ag-grid-community/core@23.2.0/dist/styles/ag-theme-balham.css",
    "@ag-grid-community/all-modules/dist/styles/ag-theme-blue.css": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/styles/ag-theme-blue.css",
    "@ag-grid-community/core/dist/styles/ag-theme-blue.css": "https://unpkg.com/@ag-grid-community/core@23.2.0/dist/styles/ag-theme-blue.css",
    "@ag-grid-community/all-modules/dist/styles/ag-theme-bootstrap.css": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/styles/ag-theme-bootstrap.css",
    "@ag-grid-community/core/dist/styles/ag-theme-bootstrap.css": "https://unpkg.com/@ag-grid-community/core@23.2.0/dist/styles/ag-theme-bootstrap.css",
    "@ag-grid-community/all-modules/dist/styles/ag-theme-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/styles/ag-theme-dark.css",
    "@ag-grid-community/core/dist/styles/ag-theme-dark.css": "https://unpkg.com/@ag-grid-community/core@23.2.0/dist/styles/ag-theme-dark.css",
    "@ag-grid-community/all-modules/dist/styles/ag-theme-fresh.css": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/styles/ag-theme-fresh.css",
    "@ag-grid-community/core/dist/styles/ag-theme-fresh.css": "https://unpkg.com/@ag-grid-community/core@23.2.0/dist/styles/ag-theme-fresh.css",
    "@ag-grid-community/all-modules/dist/styles/ag-theme-material.css": "https://unpkg.com/@ag-grid-community/all-modules@23.2.0/dist/styles/ag-theme-material.css",
    "@ag-grid-community/core/dist/styles/ag-theme-material.css": "https://unpkg.com/@ag-grid-community/core@23.2.0/dist/styles/ag-theme-material.css",
    "@ag-grid-community/react": "https://unpkg.com/@ag-grid-community/react@23.2.0/",
    "@ag-grid-community/angular": "https://unpkg.com/@ag-grid-community/angular@23.2.0/",
    "@ag-grid-community/vue": "https://unpkg.com/@ag-grid-community/vue@23.2.0/",
    "ag-charts-community": "https://unpkg.com/ag-charts-community@1.2.0/dist/ag-charts-community.cjs.js",
    "ag-grid-community": "https://unpkg.com/ag-grid-community@23.2.0/",
    "ag-grid-enterprise": "https://unpkg.com/ag-grid-enterprise@23.2.0/",
    "ag-grid-angular": "https://unpkg.com/ag-grid-angular@23.2.0/",
    "ag-grid-react": "https://unpkg.com/ag-grid-react@23.2.0/",
    "ag-grid-vue": "https://unpkg.com/ag-grid-vue@23.2.0/"
};
        var systemJsPaths = {
    "@ag-grid-community/all-modules": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-community/client-side-row-model": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-community/core": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-community/csv-export": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-community/infinite-row-model": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/all-modules": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/charts": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/clipboard": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/column-tool-panel": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/core": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/date-time-cell-editor": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/excel-export": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/filter-tool-panel": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/master-detail": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/menu": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/range-selection": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/rich-select": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/row-grouping": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/server-side-row-model": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/set-filter": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/side-bar": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/status-bar": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js",
    "@ag-grid-enterprise/viewport-row-model": "https://unpkg.com/@ag-grid-enterprise/all-modules@23.2.0/dist/ag-grid-enterprise.cjs.js"
};
    </script>

    <script src="systemjs.config.js"></script>

    <script>
      System.import('main.ts').catch(function(err) { console.error(err); });
    </script>
  </head>
  <body>
    <my-app>Loading Angular example&hellip;</my-app>
  </body>
</html>
import { Component } from '@angular/core';
import { ServerSideRowModelModule } from "@ag-grid-enterprise/server-side-row-model";
import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
import { MenuModule } from '@ag-grid-enterprise/menu';
import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
import { AppService } from './app.service';
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';

@Component({
  selector: 'my-app',
  template: `
    <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-alpine"
      [modules]="modules"
      [columnDefs]="columnDefs"
      [sideBar]="'columns'"
        [rowModelType]="'serverSide'"
        [suppressFieldDotNotation]="true"
      [defaultColDef]="defaultColDef"
      [autoGroupColumnDef]="autoGroupColumnDef"
      [pivotMode]="true"
     (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  `,
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;

  public modules: Module[] = [
    ServerSideRowModelModule,
    RowGroupingModule,
    MenuModule,
    ColumnsToolPanelModule,
  ];
  private columnDefs;
  private defaultColDef;
  private autoGroupColumnDef;
  private rowData: [];

  constructor(private appService : AppService) {
     this.columnDefs = [
      {
       allowedAggFuncs: [],
      enablePivot: true,
      enableRowGroup: true,
      enableValue: false,
      field: "businessDate",
      headerName: "Business Date",
      width: 100
      },
      { allowedAggFuncs: [],
        enablePivot: true,
        enableRowGroup: true,
        enableValue: false,
        rowGroup : true,
        field: "positionCurrency",
        headerName: "Position CCY",
        width: 100
      },
      {
        allowedAggFuncs: [],
        enablePivot: true,
        enableRowGroup: true,
        enableValue: false,
        field: "portfolio.portfolioCode",
        pivot: true,
        headerName: "Portfolio",
        width: 100,
      },
      { 
        allowedAggFuncs: [],
        enablePivot: true,
        enableRowGroup: true,
        enableValue: false,
        field: "account.mainAccountCode",
        headerName: "Main Account",
        pivot: true,pivot: true,
        width: 100
       },
      
      {
        allowedAggFuncs: ["avg", "count", "min", "max", "sum"],
        enablePivot: false,
        enableRowGroup: false,
        enableValue: true,
        field: "quantity1",
        headerName: "Quantity 1",
        width: 100
      },
    ];
      this.defaultColDef = {
        flex: 1,
        minWidth: 150,
        sortable: true,
        resizable: true,
      };
      this.autoGroupColumnDef = { minWidth: 250 };
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    let dataSource = this.createDatasource(this.appService);
    this.gridApi.setServerSideDatasource(dataSource);
  }

 createDatasource(appService: AppService) {
    return {
      getRows: (params) => {
          appService
            .getAggregationData(params)
            .subscribe((response) => {
               this.addPivotColDefs(params.request, response, params.columnApi);
              if (response.success){                
                params.successCallback(response.rows, response.lastRow);
              } else {
                params.failCallback();
              }
            });
        }
    };
  }

   addPivotColDefs(request, response, columnApi) {
    var existingPivotColDefs = columnApi.getSecondaryColumns();
    if (existingPivotColDefs && existingPivotColDefs.length > 0) {
      return;
    }
    var pivotColDefs = this.createPivotColDefs(request, response.pivotFields);
    columnApi.setSecondaryColumns(pivotColDefs);
  }

  createPivotColDefs(request, pivotFields) {
    if (request.pivotMode && request.pivotCols.length > 0) {
      var secondaryCols = [];
      pivotFields.forEach((field) => {
        this.addColDef(field, field.split("-"), request, secondaryCols);
      });
      console.log("secondaryCols", secondaryCols);
      return secondaryCols;
    }
    return [];
  }

  addColDef(colId, parts, request, res) {
    if (parts.length === 0) return [];
    var first = parts.shift();
    var existing = res.filter(function (r) {
      return r.groupId === first;
    })[0];
    if (existing) {
      existing["children"] = this.addColDef(
        colId,
        parts,
        request,
        existing.children
      );
    } else {
      var colDef = {};
      var isGroup = parts.length > 0;
      if (isGroup) {
        colDef["groupId"] = first;
        colDef["headerName"] = first;
      } else {
        console.log("get header name for ", first);
        var valueCol = request.valueCols.filter(function (r) {
          return r.field === first;
        })[0];
        console.log("valueCol", valueCol);
        colDef["colId"] = colId;
        colDef["headerName"] = valueCol ? valueCol.displayName : first;
        colDef["field"] = colId;
      }
      var children = this.addColDef(colId, parts, request, []);
      children.length > 0 ? (colDef["children"] = children) : null;
      res.push(colDef);
    }
    return res;
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

// ag-grid
import { AgGridModule } from '@ag-grid-community/angular';
import { AppComponent } from './app.component';
import { AppService } from './app.service';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AgGridModule.withComponents([]),
  ],
  declarations: [AppComponent],
    providers: [
       AppService
    ],
  bootstrap: [AppComponent],
})
export class AppModule {}
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { isUndefined,  values } from "lodash";
import { of } from "rxjs/observable/of";
import { tap, map, catchError } from "rxjs/operators";
@Injectable({
  providedIn: "root",
})
export class AppService {

  constructor(private http: HttpClient) {

  }

    public getAggregationData(params): any {
      let hardcodedRes2 = [
              {
                businessDate: "2020-06-11",
                positionCurrency: "CHF",
                "ABBES_EU-500803": 3906.712168825885,
                 "ABBES_EU-96Y01466": -611734.3808187757,
                   "ABBES_EU-96Y01891": -685995.2045077775,
              "ABBES_EU-0456ACZB5": 308288.39395851386,
              },           
              {
                businessDate: "2020-06-11",
                positionCurrency: "EUR",
                "ABBES_EU-500803": -1430.168822223764,
                 "ABBES_EU-6C020Q18": 3105883.462560227,
                    "ABBES_EU-052BAMDO8": 358851.8493461429,
              },
           
           
              {
                businessDate: "2020-06-11",
                positionCurrency: "GBP",
                "ABBES_EU-500803": 154.87514906055,
                 "ABBES_EU-052BAMDO8": -4830562.552281511,
              },
             
              {
                businessDate: "2020-06-11",
                positionCurrency: "USD",
                "ABBES_EU-500803": 1186956.858611051,
                                "ABBES_EU-6C020Q18": 3338596.5610019024,
                                    "ABBES_EU-96Y01466": 612901.8344247757,
                                       "ABBES_EU-96Y01891": 687239.2811467774,
                                          "ABBES_EU-0456ACZB5": -308054.64407251385,
                                             "ABBES_EU-052BAMDO8": -5505541.494725862,
                                                 "ABBES_US-500803": -3,
                "ABBES_US-6C020Q18": 6469.345632,
              },
            ];

            let pivotfields2 = [
              "ABBES_US-500803",
              "ABBES_US-6C020Q18",
              "ABBES_EU-500803",
              "ABBES_EU-96Y01466",
              "ABBES_EU-96Y01891",
              "ABBES_EU-0456ACZB5",
              "ABBES_EU-052BAMDO8",
              "ABBES_EU-6C020Q18",
            ];
            let lastRow = -1;
            lastRow = params.request.startRow + hardcodedRes2.length;
            console.log('returning')
            return of({
              rows: hardcodedRes2,
              pivotFields: pivotfields2,
              lastRow: lastRow,
              success: true,
            });
    }

}
/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js from the angular tutorial - https://angular.io/tutorial)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;

module.exports.translate = function(load){
  if (load.source.indexOf('moduleId') != -1) return load;

  var url = document.createElement('a');
  url.href = load.address;

  var basePathParts = url.pathname.split('/');

  basePathParts.pop();
  var basePath = basePathParts.join('/');

  var baseHref = document.createElement('a');
  baseHref.href = this.baseURL;
  baseHref = baseHref.pathname;

  if (!baseHref.startsWith('/base/')) { // it is not karma
    basePath = basePath.replace(baseHref, '');
  }

  load.source = load.source
    .replace(templateUrlRegex, function(match, quote, url){
      var resolvedUrl = url;

      if (url.startsWith('.')) {
        resolvedUrl = basePath + url.substr(1);
      }

      return 'templateUrl: "' + resolvedUrl + '"';
    })
    .replace(stylesRegex, function(match, relativeUrls) {
      var urls = [];

      while ((match = stringRegex.exec(relativeUrls)) !== null) {
        if (match[2].startsWith('.')) {
          urls.push('"' + basePath + match[2].substr(1) + '"');
        } else {
          urls.push('"' + match[2] + '"');
        }
      }

      return "styleUrls: [" + urls.join(', ') + "]";
    });

  return load;
};
/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js from the angular tutorial - https://angular.io/tutorial)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    var ANGULAR_VERSION = "5.1.3";
    var ANGULAR_CDK_VERSION = "5.2.5";
    var ANGULAR_MATERIAL_VERSION = "5.2.5";

    System.config({
        // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
        transpiler: "ts",
        typescriptOptions: {
            // Copy of compiler options in standard tsconfig.json
            target: "es5",
            module: "system", //gets rid of console warning
            moduleResolution: "node",
            sourceMap: true,
            emitDecoratorMetadata: true,
            experimentalDecorators: true,
            lib: ["es2015", "dom"],
            noImplicitAny: true,
            suppressImplicitAnyIndexErrors: true
        },
        meta: {
            typescript: {
                exports: "ts"
            },
            '*.css': {loader: 'css'}
        },
        paths:
            Object.assign(
                {
                    // paths serve as alias
                    "npm:": "https://unpkg.com/",
                }, systemJsPaths)
        ,
        // RxJS makes a lot of requests to unpkg. This guy addressed it:
        // https://github.com/OasisDigital/rxjs-system-bundle.
        bundles: {
            "npm:rxjs-system-bundle@5.5.5/Rx.system.js": [
                "rxjs",
                "rxjs/*",
                "rxjs/operator/*",
                "rxjs/operators/*",
                "rxjs/observable/*",
                "rxjs/scheduler/*",
                "rxjs/symbol/*",
                "rxjs/add/operator/*",
                "rxjs/add/observable/*",
                "rxjs/util/*"
            ]
        },
        // map tells the System loader where to look for things
        map: Object.assign(
            {
                // css plugin
                'css': 'npm:systemjs-plugin-css/css.js',

                // angular bundles
                "@angular/animations": "npm:@angular/animations@" + ANGULAR_VERSION + "/bundles/animations.umd.js",
                "@angular/animations/browser": "npm:@angular/animations@" + ANGULAR_VERSION + "/bundles/animations-browser.umd.js",
                "@angular/core": "npm:@angular/core@" + ANGULAR_VERSION + "/bundles/core.umd.js",
                "@angular/common": "npm:@angular/common@" + ANGULAR_VERSION + "/bundles/common.umd.js",
                "@angular/common/http": "npm:@angular/common@" + ANGULAR_VERSION + "/bundles/common-http.umd.js",
                "@angular/compiler": "npm:@angular/compiler@" + ANGULAR_VERSION + "/bundles/compiler.umd.js",
                "@angular/platform-browser": "npm:@angular/platform-browser@" + ANGULAR_VERSION + "/bundles/platform-browser.umd.js",
                "@angular/platform-browser/animations": "npm:@angular/platform-browser@" + ANGULAR_VERSION + "/bundles/platform-browser-animations.umd.js",
                "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@" + ANGULAR_VERSION + "/bundles/platform-browser-dynamic.umd.js",
                "@angular/http": "npm:@angular/http@" + ANGULAR_VERSION + "/bundles/http.umd.js",
                "@angular/router": "npm:@angular/router@" + ANGULAR_VERSION + "/bundles/router.umd.js",
                "@angular/router/upgrade": "npm:@angular/router@" + ANGULAR_VERSION + "/bundles/router-upgrade.umd.js",
                "@angular/forms": "npm:@angular/forms@" + ANGULAR_VERSION + "/bundles/forms.umd.js",
                "@angular/upgrade": "npm:@angular/upgrade@" + ANGULAR_VERSION + "/bundles/upgrade.umd.js",
                "@angular/upgrade/static": "npm:@angular/upgrade@" + ANGULAR_VERSION + "/bundles/upgrade-static.umd.js",
                "angular-in-memory-web-api": "npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js",
                // material design
                "@angular/material": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/bundles/material.umd.js",
                "@angular/cdk/platform": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-platform.umd.js",
                "@angular/cdk/bidi": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-bidi.umd.js",
                "@angular/cdk/coercion": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-coercion.umd.js",
                "@angular/cdk/keycodes": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-keycodes.umd.js",
                "@angular/cdk/a11y": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-a11y.umd.js",
                "@angular/cdk/overlay": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-overlay.umd.js",
                "@angular/cdk/portal": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-portal.umd.js",
                "@angular/cdk/observers": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-observers.umd.js",
                "@angular/cdk/collections": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-collections.umd.js",
                "@angular/cdk/accordion": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-accordion.umd.js",
                "@angular/cdk/scrolling": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-scrolling.umd.js",
                "@angular/cdk/layout": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-layout.umd.js",
                "@angular/cdk/table": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-table.umd.js",
                "@angular/cdk/text-field": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-text-field.umd.js",
                "@angular/cdk/tree": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-tree.umd.js",
                "@angular/cdk/stepper": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-stepper.umd.js",
                // ngx bootstrap
                "ngx-bootstrap": "npm:ngx-bootstrap@2.0.0-rc.0",
                // ng2 typeahead
                "ng2-typeahead": "npm:ng2-typeahead@1.2.0",

                ts: "npm:plugin-typescript@5.2.7/lib/plugin.js",
                tslib: "npm:tslib@1.7.1/tslib.js",
                typescript: "npm:typescript@2.3.2/lib/typescript.js",

                // for some of the examples
                lodash: "npm:lodash@4.17.4/lodash.js",

                // our app is within the app folder, appLocation comes from index.html
                app: appLocation + "app",

                rxjs: "npm:rxjs@6.1.0/bundles/rxjs.umd.min.js"
            },
            systemJsMap
        ),
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: "./main.ts",
                defaultExtension: "ts",
                meta: {
                    "./*.ts": {
                        loader: boilerplatePath + "systemjs-angular-loader.js"
                    }
                }
            },
            'ag-grid-angular': {
                main: './bundles/ag-grid-angular.umd.js',
                defaultExtension: 'js'
            },
            'ag-grid-community': {
                main: './dist/ag-grid-community.cjs.js',
                defaultExtension: 'js'
            },
            'ag-grid-enterprise': {
                main: './dist/ag-grid-enterprise.cjs.js',
                defaultExtension: 'js'
            },
            "@ag-grid-community/angular": {
                main: "./bundles/ag-grid-community-angular.umd.js",
                defaultExtension: "js"
            },
            rxjs: {
                defaultExtension: false
            }
        }
    });
})(this);

// Angular entry point file
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from 'app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);