angular - Angular 4+ ag-grid が読み込み中にスタックする

Question

私が見つけたほとんどの例を嘲笑したので、私は立ち往生しています。アプリケーションを起動すると返されるのは次のとおりです。

package.jsonところで：

"ag-grid": "^15.0.0",
"ag-grid-angular": "^15.0.0",

次のように呼び出すグリッド コンポーネント ラッパー (CS-Grid) を作成しました。

<cs-card card-title="Grid (Grid Component)">
  <section card-content>
    <cs-grid #AgGrid class="cs-sort-agrid cs-grid-table"
             [gridOptions]="gridOptions" 
             style="width: 900px; height: 115px;"></cs-grid>
  </section>
</cs-card>

CS-Grid HTML:

<ag-grid-angular #agGrid class="ag-fresh cs-grid-float" [gridOptions]="gridOptions"
[ngStyle]="{'height.px':height}">
</ag-grid-angular>

CS-Grid TS:

import { GridOptions } from 'ag-grid/main';
import { Component,Input,ViewChild } from '@angular/core';

    @Component({
      selector: 'cs-grid',
      templateUrl:'./grid.component.html',
      styleUrls: ['./grid.component.scss']
    })
    export class CSGridComponent {
       @Input('gridOptions') gridOptions;
       @Input('height') height=400; 
       @ViewChild('agGrid') gridElement;
       constructor(){
       }
       getNativeElement(){
         let nativeEle=this.gridElement._nativeElement;
         return nativeEle;
       }
    }

さて、作業は CS-Grid を呼び出すアプリケーションにあります。HTML は上にあるので、TS は次のようになります。

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { CSPageComponent } from '@CSWeb/CSUILibrary';
import { GridOptions } from 'ag-grid/main';
import { CSEventHubs, CSTabBarService } from '@CSWeb/MainService';
import { CSTagDef, CSTagPresentationDef, TagSelectorCategory, TagSelectorEntity } from '@CSWeb/Metadata';

@Component({
  selector: 'cs-elements-page',
  templateUrl: './elements-page.component.html',
  styleUrls: ['./elements-page.component.scss']
})
export class ElementsPageComponent extends CSPageComponent implements OnInit {
  gridOptions: GridOptions;
  columnDefs;
  rowData;
  gridApi: any;
  @ViewChild('AgGrid') gridElm;

  constructor() {
  }

  ngOnInit() {
    this.gridOptions = <GridOptions>{};
    this.gridOptions.onGridReady = (params) => {
      this.gridApi = params.api;
      this.initGrid();
    }
  }

  initGrid() {
    this.columnDefs = [
      { headerName: 'Make', field: 'make', minwidth: 100 },
      { headerName: 'Model', field: 'model', minwidth: 100 },
      { headerName: 'Price', field: 'price', minwidth: 100 },
    ];
    this.gridOptions.columnDefs = this.columnDefs;

    this.rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'F150', price: 55000 },
      { make: 'Toyota', model: 'RAV4', price: 35000 },
      { make: 'Chevrolet', model: 'Cheyene', price: 53000 },
      { make: 'Ford', model: 'Mondero', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 },
      { make: 'Honda', model: 'Hawk', price: 2000 },
      { make: 'Yamaha', model: '900', price: 3000 },
      { make: 'ToysRUs', model: 'Tricycle', price: 80 },
      { make: 'ToysRUs', model: 'RollerSkates', price: 30 }
    ];
    this.gridOptions.rowData = this.rowData;

    this.gridOptions.enableFilter = true;
    this.gridOptions.enableSorting = true;
    this.gridOptions.enableColResize = true;
    this.gridOptions.rowModelType = 'infinite';
    this.gridOptions.pagination = true;
    this.gridOptions.paginationPageSize = 20;
    this.gridOptions.cacheBlockSize = 20;
    this.gridOptions.rowHeight = 30;
    this.gridOptions.maxBlocksInCache = 1;
  }
}

何か単純なものが欠けていると思わずにはいられません。何か案は？

前もって感謝します！