{"action":"created","issue":{"url":"https://api.github.com/repos/ceolter/ag-grid-ng2/issues/68","repository_url":"https://api.github.com/repos/ceolter/ag-grid-ng2","labels_url":"https://api.github.com/repos/ceolter/ag-grid-ng2/issues/68/labels{/name}","comments_url":"https://api.github.com/repos/ceolter/ag-grid-ng2/issues/68/comments","events_url":"https://api.github.com/repos/ceolter/ag-grid-ng2/issues/68/events","html_url":"https://github.com/ceolter/ag-grid-ng2/issues/68","id":183710071,"number":68,"title":"Uncaught TypeError: Cannot read property 'GridOptionsWrapper' of undefined(…)","user":{"login":"kashban","id":6595407,"avatar_url":"https://avatars.githubusercontent.com/u/6595407?v=3","gravatar_id":"","url":"https://api.github.com/users/kashban","html_url":"https://github.com/kashban","followers_url":"https://api.github.com/users/kashban/followers","following_url":"https://api.github.com/users/kashban/following{/other_user}","gists_url":"https://api.github.com/users/kashban/gists{/gist_id}","starred_url":"https://api.github.com/users/kashban/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kashban/subscriptions","organizations_url":"https://api.github.com/users/kashban/orgs","repos_url":"https://api.github.com/users/kashban/repos","events_url":"https://api.github.com/users/kashban/events{/privacy}","received_events_url":"https://api.github.com/users/kashban/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-10-18T14:53:19Z","updated_at":"2016-11-28T19:33:20Z","closed_at":null,"body":"Heyas, \n\nI included ag-grid-ng2 into an Ionic 2 RC.0 app and stumble over this error:\n\n> Uncaught TypeError: Cannot read property 'GridOptionsWrapper' of undefined(…)\n\nThe code in question:\n\n```\nvar LoggerFactory = (function () {\n    function LoggerFactory() {\n    }\n    LoggerFactory.prototype.setBeans = function (gridOptionsWrapper$$1) {\n        this.logging = gridOptionsWrapper$$1.isDebug();\n    };\n    LoggerFactory.prototype.create = function (name) {\n        return new Logger(name, this.logging);\n    };\n    __decorate$127([\n        __param$2(0, context_2$1.Qualifier('gridOptionsWrapper')), \n        __metadata$22('design:type', Function), \n--------->\n        __metadata$22('design:paramtypes', [gridOptionsWrapper_1$2.GridOptionsWrapper]), \n--------->\n        __metadata$22('design:returntype', void 0)\n    ], LoggerFactory.prototype, \"setBeans\", null);\n    LoggerFactory = __decorate$127([\n        context_1$4.Bean('loggerFactory'), \n        __metadata$22('design:paramtypes', [])\n    ], LoggerFactory);\n    return LoggerFactory;\n})();\n```\n\nIonic 2 RC.0 uses \"es2015\" as module which might be the issue here since the example uses \"commonjs\". Unfortunately changing my project to \"commonjs\" brings up other issues, so I'd rather fix the issue above if possible. \n\nThe component I am using ag-grid with looks like this:\n\n.ts:\n\n```\nimport { Component, Input, Output, AfterViewInit, EventEmitter } from '@angular/core';\nimport { Events } from 'ionic-angular';\nimport { GridOptions } from 'ag-grid/main';\nimport 'ag-grid-enterprise/main';\n\n// import { NavController } from 'ionic-angular';\n\n/*\n  Generated class for the ProcessPostbox component.\n  Created by U0002331 (Jürgen Wahlmann)\n\n  Shows a workorder postbox with accordeon header, search field and a grid of workorders\n\n  @param showPostbox: true: Show postbox, false, hide this postbox\n  @param state: State of process this postbox represents\n*/\n\nconst LOG_PREFIX = 'ProcessPostbox: ';\n\n@Component({\n  selector: 'process-postbox',\n  templateUrl: 'process-postbox.html'\n})\nexport class ProcessPostbox implements AfterViewInit {\n\n  @Input() state: string;\n  @Input() title: string;\n  @Input() workorderCount: number = 0;\n  @Input() postboxSelected: string;\n  @Input() filterlabel: string = '';\n  @Input() columnDefs: any[];\n  @Input() rowData: any[];\n\n  @Output() onTitleClicked = new EventEmitter();\n  @Output() onGridRowSelected = new EventEmitter();\n  @Output() onGridDoubleClicked = new EventEmitter();\n  @Output() onGridReady = new EventEmitter();\n\n  quickFilterText: string = '';\n  gridSelectedRowId: number;\n  gridSelectedRowUserTaskId: string;\n\n  private gridOptions: GridOptions;\n  private rowCount: string;\n\n  constructor(public events: Events) {\n    console.log(LOG_PREFIX + 'ProcessPostbox constructor called.');\n    this.gridOptions = <GridOptions>{};\n  }\n\n  /**\n   * After initializing the View inject grid\n   */\n  ngAfterViewInit() {\n\n  }\n\n  /**\n   * Title clicked, inform parent component\n   */\n  titleClicked() {\n    this.onTitleClicked.emit(this.state);\n  }\n\n  workOrderRead(args) {\n    // this.ngAfterViewInit();\n  }\n\n  ngOnChanges(changes) {\n    console.log(LOG_PREFIX + 'ngOnChanges: ' + JSON.stringify(changes));\n    //    if (changes.postboxSelected != null || changes.gridDef != null)\n    //       this.ngAfterViewInit();\n    // Called right after our bindings have been checked but only\n    // if one of our bindings has changed.\n    //\n    // changes is an object of the format:\n    // {\n    //   'prop': PropertyUpdate\n    // }\n  }\n  private calculateRowCount() {\n    if (this.gridOptions.api && this.rowData) {\n      var model = this.gridOptions.api.getModel();\n      var totalRows = this.rowData.length;\n      var processedRows = model.getRowCount();\n      this.rowCount = processedRows.toLocaleString() + ' / ' + totalRows.toLocaleString();\n    }\n  }\n\n  private onModelUpdated() {\n    console.log('onModelUpdated');\n    this.calculateRowCount();\n  }\n\n  private onReady() {\n    console.log('onReady');\n    this.calculateRowCount();\n  }\n\n  private onCellClicked($event) {\n    console.log('onCellClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);\n    this.onGridRowSelected.emit($event);\n  }\n\n  private onCellValueChanged($event) {\n    console.log('onCellValueChanged: ' + $event.oldValue + ' to ' + $event.newValue);\n  }\n\n  private onCellDoubleClicked($event) {\n    console.log('onCellDoubleClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);\n    this.gridSelectedRowId = $event.rowIndex;\n    this.onGridDoubleClicked.emit($event);\n  }\n\n  private onCellContextMenu($event) {\n    console.log('onCellContextMenu: ' + $event.rowIndex + ' ' + $event.colDef.field);\n  }\n\n  private onCellFocused($event) {\n    console.log('onCellFocused: (' + $event.rowIndex + ',' + $event.colIndex + ')');\n  }\n\n  private onRowSelected($event) {\n    // taking out, as when we 'select all', it prints to much to the console!!\n    // console.log('onRowSelected: ' + $event.node.data.name);\n    this.onGridRowSelected.emit($event);\n  }\n\n  private onSelectionChanged() {\n    console.log('selectionChanged');\n  }\n\n  private onBeforeFilterChanged() {\n    console.log('beforeFilterChanged');\n  }\n\n  private onAfterFilterChanged() {\n    console.log('afterFilterChanged');\n  }\n\n  private onFilterModified() {\n    console.log('onFilterModified');\n  }\n\n  private onBeforeSortChanged() {\n    console.log('onBeforeSortChanged');\n  }\n\n  private onAfterSortChanged() {\n    console.log('onAfterSortChanged');\n  }\n\n  private onVirtualRowRemoved($event) {\n    // because this event gets fired LOTS of times, we don't print it to the\n    // console. if you want to see it, just uncomment out this line\n    // console.log('onVirtualRowRemoved: ' + $event.rowIndex);\n  }\n\n  private onRowClicked($event) {\n    console.log('onRowClicked: ' + $event.node.data.name);\n  }\n\n  private onQuickFilterChanged($event) {\n    this.gridOptions.api.setQuickFilter($event.target.value);\n  }\n\n  // here we use one generic event to handle all the column type events.\n  // the method just prints the event name\n  private onColumnEvent($event) {\n    console.log('onColumnEvent: ' + $event);\n  }\n\n}\n```\n\n*.html\n\n```\n<!--\n  Generated template for the ProcessPostbox component.\n\n  See https://angular.io/docs/ts/latest/api/core/ComponentMetadata-class.html\n  for more info on Angular 2 Components.\n-->\n<ion-toolbar>\n    <ion-segment>\n        <button ion-button (click)=\"titleClicked()\" block>\n            <ion-icon name=\"filing\"></ion-icon> &nbsp;{{title}}&nbsp;{{filterlabel}}  \n            &nbsp;<ion-badge danger>{{gridDef.rowData ? gridDef.rowData.length : 0}}</ion-badge>\n        </button>\n    </ion-segment>\n</ion-toolbar>\n<ion-card [hidden]=\"postboxSelected !== state\">\n    <ion-input placeholder=\"Filter...\" type=\"text\" [(ngModel)]=\"quickFilterText\"></ion-input>\n    <p></p>\n    <button ion-button color=\"primary\" icon-left (click)=\"workOrderRead({ id: gridSelectedRowId, userTaskId: gridSelectedRowUserTaskId})\"><ion-icon name=\"eye\"></ion-icon>Anzeigen</button>\n    <ag-grid-ng2 #agGrid style=\"width: 100%; height: 500px;\" class=\"ag-material\" [gridOptions]=\"gridOptions\" [columnDefs]=\"columnDefs\" [showToolPanel]=\"showToolPanel\" [rowData]=\"rowData\" enableColResize enableSorting enableFilter groupHeaders toolPanelSuppressGroups\n        toolPanelSuppressValues debug rowHeight=\"22\" rowSelection=\"single\" (modelUpdated)=\"onModelUpdated()\" (cellClicked)=\"onCellClicked($event)\" (cellDoubleClicked)=\"onCellDoubleClicked($event)\" (cellContextMenu)=\"onCellContextMenu($event)\" (cellValueChanged)=\"onCellValueChanged($event)\"\n        (cellFocused)=\"onCellFocused($event)\" (rowSelected)=\"onRowSelected($event)\" (selectionChanged)=\"onSelectionChanged()\" (beforeFilterChanged)=\"onBeforeFilterChanged()\" (afterFilterChanged)=\"onAfterFilterChanged()\" (filterModified)=\"onFilterModified()\"\n        (beforeSortChanged)=\"onBeforeSortChanged()\" (afterSortChanged)=\"onAfterSortChanged()\" (virtualRowRemoved)=\"onVirtualRowRemoved($event)\" (rowClicked)=\"onRowClicked($event)\" (ready)=\"onReady($event)\" (columnEverythingChanged)=\"onColumnEvent($event)\"\n        (columnRowGroupChanged)=\"onColumnEvent($event)\" (columnValueChanged)=\"onColumnEvent($event)\" (columnMoved)=\"onColumnEvent($event)\" (columnVisible)=\"onColumnEvent($event)\" (columnGroupOpened)=\"onColumnEvent($event)\" (columnResized)=\"onColumnEvent($event)\"\n        (columnPinnedCountChanged)=\"onColumnEvent($event)\">\n    </ag-grid-ng2>\n</ion-card>\n```\n\nexample columnDefs:\n\n```\ncolumnEvaluateDefs = [\n    CONSTANTS.COLDEF_WORKORDERGROUPID,\n    CONSTANTS.COLDEF_MOBILESTATE,\n    CONSTANTS.COLDEF_NUMOFCOMMENTS,\n    { headerName: 'ID', field: 'orderId', width: 100, filter: 'text', hide: false },\n    { headerName: 'Lokationsobjekt', field: 'locationObject', width: 200, filter: 'text', hide: false },\n    { headerName: 'Auftragstext', field: 'title', width: 200, filter: 'text', hide: false },\n    { headerName: 'Betriebsmittel', field: 'asset', width: 200, filter: 'text', hide: false },\n    { headerName: 'Zuständigkeit', field: 'competence', width: 200, filter: 'text', hide: false },\n    { headerName: 'Gemeinde', field: 'community', width: 200, filter: 'text', hide: true },\n    { headerName: 'Ortsteil', field: 'district', width: 200, filter: 'text', hide: true },\n    { headerName: 'Ausführungsdatum', field: 'completionDateText', width: 150, filter: 'text', hide: false }\n  ];\n\n```\n\nCONSTANTS.ts:\n\n```\n\npublic static COLDEF_WORKORDERGROUPID = {\n        headerName: '', field: 'workOrderGroupId', width: 25,\n        cellRendererFramework: {component: GroupIdCellRenderer},\n        hide: false\n    };\n\n    public static COLDEF_MOBILESTATE = {\n        headerName: '', field: 'mobileState', width: 25, \n        cellRendererFramework: { component: MobilestateCellRenderer}\n        , hide: false\n    };\n\n    public static COLDEF_NUMOFCOMMENTS = {\n        headerName: '', field: 'numberOfComments', width: 25, \n        cellRendererFramework: { component: NumOfCommentsCellRenderer },\n        hide: false\n    };\n\n    public static COLDEF_DISPATCHED = {\n        headerName: '', field: 'dispatched', width: 25,\n        cellRendererFramework: { component: DispatchedCellRenderer }, hide: false\n    };\n```\n\nAny idea how I can fix the missing gridOptionsWrapper?\n"},"comment":{"url":"https://api.github.com/repos/ceolter/ag-grid-ng2/issues/comments/263370284","html_url":"https://github.com/ceolter/ag-grid-ng2/issues/68#issuecomment-263370284","issue_url":"https://api.github.com/repos/ceolter/ag-grid-ng2/issues/68","id":263370284,"user":{"login":"dmarginian","id":12652143,"avatar_url":"https://avatars.githubusercontent.com/u/12652143?v=3","gravatar_id":"","url":"https://api.github.com/users/dmarginian","html_url":"https://github.com/dmarginian","followers_url":"https://api.github.com/users/dmarginian/followers","following_url":"https://api.github.com/users/dmarginian/following{/other_user}","gists_url":"https://api.github.com/users/dmarginian/gists{/gist_id}","starred_url":"https://api.github.com/users/dmarginian/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dmarginian/subscriptions","organizations_url":"https://api.github.com/users/dmarginian/orgs","repos_url":"https://api.github.com/users/dmarginian/repos","events_url":"https://api.github.com/users/dmarginian/events{/privacy}","received_events_url":"https://api.github.com/users/dmarginian/received_events","type":"User","site_admin":false},"created_at":"2016-11-28T19:33:20Z","updated_at":"2016-11-28T19:33:20Z","body":"@seanlandsman \r\nI tried  the beta (7.0.0-beta.4) and I am still seeing \"Cannot read property 'GridOptionsWrapper' of undefined' when bundling with rollup.  Inspecting the bundle generated by rollup the GridOptionsWrapper code is way below the logger.js code (where the error is coming from).  I am thinking this may be related to - https://github.com/rollup/rollup/issues/995.  I will post back if I find out more."}}
{"actor":{"display_login":"dmarginian"}}